利用Angular Event在不同組件之間傳遞數(shù)據(jù)
為了實(shí)現(xiàn)在Angular不同Component之間相互傳遞數(shù)據(jù),可以使用Event分發(fā)的思路來(lái)實(shí)現(xiàn)。
使用事件實(shí)現(xiàn)在不同組件之前傳遞數(shù)據(jù)的思路如下:
定義一個(gè)服務(wù)
在終端輸入
ng g service event
Angular會(huì)自動(dòng)在項(xiàng)目的app目錄下生成 event.service.ts 和 event.service.spec.ts 兩個(gè)文件。
我們?cè)?event.service.ts 文件中完成相關(guān)業(yè)務(wù)代碼即可。
例如,我們?cè)诟姆?wù)中實(shí)現(xiàn)發(fā)布事件和訂閱事件的方法:
import { Injectable } from '@angular/core';import { Subject } from 'rxjs';@Injectable({  providedIn: 'root'})export class EventService {  // 構(gòu)建Subject的實(shí)例,用來(lái)完成事件的發(fā)布和訂閱  private subject = new Subject < any > ();  constructor() {}  publish(value: any, err: any) {    if (value !== undefined) {      // 將新的事件放入next隊(duì)列中      this.subject.next(value);    }    if (err !== undefined) {      // 將錯(cuò)誤放入error隊(duì)列      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文件中注冊(cè)我們的服務(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ā)布一個(gè)事件,組件B訂閱該事件即可。
在組件A中發(fā)布事件
export class AComponent implements OnInit { constructor(  private event: EventService ) { } ngOnInit() { } someThingChanged(data) {  // 發(fā)布事件  this.event.publish({   // 可以定義一個(gè)事件類(lèi)型,實(shí)現(xiàn)多個(gè)不同類(lèi)型事件的發(fā)布   type: 'event_type_you_want_define',   // 可以攜帶任何數(shù)據(jù),并通過(guò)事件發(fā)布出去   data: data,   ohter: 'ohter things you want to pass out'  }, err); }}在組件B中訂閱事件
export BComponent implements OnInit { constructor(  private event: EventService ) { } ngOnInit() {   // 在初始化方法中,可以完成對(duì)事件的訂閱工作  this.event.subject({   next: value => {    // 可以通過(guò)約定事件類(lèi)型,在這里進(jìn)行檢查,從而完成不同的邏輯    // do something with value   },   error: err => {    // handle err   },   complete: () => {    // handle complete   }  }) }}以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注