Angular2(最终版本)组件无法通过服务中的可观察对象进行通信

Question

我正在使用Angular v2.1，我试图使组件通过共享服务发送消息。

我想首先从第一个组件company.component.ts发送数据到第二个组件modal.component.ts。

我不知道问题到底在哪里(如果它是在发送或接收数据)。在调试接收数据时，我发现了一个订阅者对象:

Subscriber {closed: false, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false…}

在modal.service.ts:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class ModalService {
  private sharedCompanySource = new Subject<string>();
  sharedCompany = this.sharedCompanySource.asObservable();
  getCompany(){
    return this.sharedCompany;
  }
  setCompany(_company: any){
    this.sharedCompanySource.next(_company);
  }
}

第一个组件company.component.ts: 中的

import { ModalService }  from './modals/modal.service';
@Component({
    templateUrl: 'company.component.html',
    providers: [
        ModalService
    ]
})
export class CompanyComponent implements OnInit {
  constructor(private missionService: ModalService) {
     this.missionService.setCompany("hellooooooooooooooo");
  }
}

第二组件modal.component.ts:

import { ModalService }  from './modals/modal.service';
import { Subscription }         from 'rxjs/Subscription';
@Component({
    templateUrl: 'modal.component.html',
    providers: [
        ModalService
    ]
})
export class ModalComponent implements OnInit {
  subscription:Subscription;
  constructor(private missionService: ModalService) {
     this.subscription = missionService.sharedCompany.subscribe();
  }
}

Answer 1

两个组件都声明

providers: [
    ModalService
]

所以他们不共享服务。两者都有自己独立的ModalService实例。这就是提供者的作用。

如果你想要一个共享的服务，那就在它的父模块的providers中声明它。

请注意，您也不传递任何回调给subscribe()，所以当它们开始共享相同的服务时，什么也不会发生