ngx通讯之可观察对象实现

1.公共服务

//test.service.ts

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class TestService{
  missionAnnouncedSource = new Subject();
  missionAnnounced$:any = this.missionAnnouncedSource.asObservable();
  announceMission(misson:any){
    this.missionAnnouncedSource.next(mission)
  }
} 

2.信息发出者

//test.component.ts  (发送可观察对象)
import {TestService} from './test.service';

export class TestComponent implements OnInit {
  constructor(private ts: TestService) { }
  
  ngOnInit(){
    this.test();
  }
  
  test(){  //发送信息
    this.ts.announceMission("hello,it is just a test file")
  }
}

3.信息接收者

//test2.component.ts  (接收可观察对象)
import {TestService} from './test.service';
import {Subscription} from 'rxjs/Subscription';

export class Test2Component implements OnInit,OnDestory {
  subscription:Subscription;
  message:any;
  constructor(private ts: TestService) { 
      this.subscription = ts.missionAnnounced$.subscribe(
        mission => {
          this.message = mission  //接收信息
        }
    )
  }
  
  ngOnInit(){
   
  }
  
  ngOnDestory(){ //取消订阅
    this.subscription.unsubscribe();
  }
}