Angular事件之不同組件間傳遞數(shù)據(jù)的方法

更新時間：2018年11月15日 11:37:22 作者：程屁凹

這篇文章主要介紹了Angular事件之不同組件間傳遞數(shù)據(jù)的方法，利用Angular Event在不同組件之間傳遞數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

利用Angular Event在不同組件之間傳遞數(shù)據(jù)

為了實現(xiàn)在Angular不同Component之間相互傳遞數(shù)據(jù)，可以使用Event分發(fā)的思路來實現(xiàn)。

使用事件實現(xiàn)在不同組件之前傳遞數(shù)據(jù)的思路如下：

定義一個服務(wù)，用來實現(xiàn)事件的發(fā)布和訂閱方法。
組件A注入事件服務(wù)的依賴，將自己要傳遞數(shù)據(jù)的數(shù)據(jù)以事件的形式發(fā)布出去。
組件B注入事件服務(wù)的依賴，并訂閱相關(guān)事件。

定義一個服務(wù)

在終端輸入

ng g service event

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

我們在 event.service.ts 文件中完成相關(guān)業(yè)務(wù)代碼即可。

例如，我們在改服務(wù)中實現(xiàn)發(fā)布事件和訂閱事件的方法:

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

@Injectable({
  providedIn: 'root'
})
export class EventService {
  // 構(gòu)建Subject的實例，用來完成事件的發(fā)布和訂閱
  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);
    }
    // 表示當(dāng)前事件結(jié)束
    this.subject.complete();
  }

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

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

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

利用EventService在不同組件間傳遞數(shù)據(jù)

假定組件A中的數(shù)據(jù)需要傳遞到組件B中，這里的數(shù)據(jù)可以是事件、文本內(nèi)容、狀態(tài)改變等等東西。則在組件A中，我們可以發(fā)布一個事件，組件B訂閱該事件即可。

在組件A中發(fā)布事件

export class AComponent implements OnInit {
 constructor(
  private event: EventService
 ) { }
 ngOnInit() {
 }
 someThingChanged(data) {
  // 發(fā)布事件
  this.event.publish({
   // 可以定義一個事件類型，實現(xiàn)多個不同類型事件的發(fā)布
   type: 'event_type_you_want_define',
   // 可以攜帶任何數(shù)據(jù)，并通過事件發(fā)布出去
   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 => {
    // 可以通過約定事件類型，在這里進(jìn)行檢查，從而完成不同的邏輯
    // do something with value
   },
   error: err => {
    // handle err
   },
   complete: () => {
    // handle complete
   }
  })
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: