利用Angular Event在不同組件之間傳遞數(shù)據
為了實現(xiàn)在Angular不同Component之間相互傳遞數(shù)據,可以使用Event分發(fā)的思路來實現(xiàn)。
使用事件實現(xiàn)在不同組件之前傳遞數(shù)據的思路如下:
定義一個服務
在終端輸入
Angular會自動在項目的app目錄下生成 event.service.ts 和 event.service.spec.ts 兩個文件。
我們在 event.service.ts 文件中完成相關業(yè)務代碼即可。
例如,我們在改服務中實現(xiàn)發(fā)布事件和訂閱事件的方法:
import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class EventService { // 構建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); } // 表示當前事件結束 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在不同組件間傳遞數(shù)據
假定組件A中的數(shù)據需要傳遞到組件B中,這里的數(shù)據可以是事件、文本內容、狀態(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ù)據,并通過事件發(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 => { // 可以通過約定事件類型,在這里進行檢查,從而完成不同的邏輯 // do something with value }, error: err => { // handle err }, complete: () => { // handle complete } }) } }
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。