Angular事件之不同組件間傳遞數據的方法

ng g service event 

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

@Injectable({
 providedIn: 'root'
})
export class EventService {
 // 構建Subject的實例，用來完成事件的發布和訂閱
 private subject = new Subject < any > ();
 constructor() {}
 publish(value: any, err: any) {
 if (value !== undefined) {
 // 將新的事件放入next隊列中
 this.subject.next(value);
 }
 if (err !== undefined) {
 // 將錯誤放入error隊列
 this.subject.error(err);
 }
 // 表示當前事件結束
 this.subject.complete();
 }

 subcribe(handler: {
 next: (value) => void,
 error: (err) => void,
 complete: () => void
 }) {
 this.subject.asObservable().subcribe(handler);
 }
}

@NgModule({
 declarations: [],
 imports: [],
 providers: [EventService],
 bootstrap: [AppComponent]
})
export class AppModule { }

export class AComponent implements OnInit {
 constructor(
 private event: EventService
 ) { }
 ngOnInit() {
 }
 someThingChanged(data) {
 // 發布事件
 this.event.publish({
 // 可以定義一個事件類型，實現多個不同類型事件的發布
 type: 'event_type_you_want_define',
 // 可以攜帶任何數據，并通過事件發布出去
 data: data,
 ohter: 'ohter things you want to pass out'
 }, err);
 }
}

export BComponent implements OnInit {
 constructor(
 private event: EventService
 ) { }
 ngOnInit() {
 // 在初始化方法中，可以完成對事件的訂閱工作
 this.event.subject({
 next: value => {
 // 可以通過約定事件類型，在這里進行檢查，從而完成不同的邏輯
 // do something with value
 },
 error: err => {
 // handle err
 },
 complete: () => {
 // handle complete
 }
 })
 }
}