利用Angular Event在不同組件之間傳遞數據

為了實現在Angular不同Component之間相互傳遞數據，可以使用Event分發的思路來實現。

使用事件實現在不同組件之前傳遞數據的思路如下：

定義一個服務

在終端輸入

ng g service event 

Angular會自動在項目的app目錄下生成 event.service.ts 和 event.service.spec.ts 兩個文件。

我們在 event.service.ts 文件中完成相關業務代碼即可。

例如，我們在改服務中實現發布事件和訂閱事件的方法:

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);  }}

最后，為了能讓我們定義的服務能夠被注入到其他組件中，我們還需要在app.modules.ts文件中注冊我們的服務：

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

利用EventService在不同組件間傳遞數據

假定組件A中的數據需要傳遞到組件B中，這里的數據可以是事件、文本內容、狀態改變等等東西。 則在組件A中，我們可以發布一個事件，組件B訂閱該事件即可。

在組件A中發布事件

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); }}

在組件B中訂閱事件

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   }  }) }}