怎么在Angular中實(shí)現(xiàn)不同組件間的數(shù)據(jù)傳遞

怎么在Angular中實(shí)現(xiàn)不同組件間的數(shù)據(jù)傳遞？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

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

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

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

• 定義一個(gè)服務(wù)，用來實(shí)現(xiàn)事件的發(fā)布和訂閱方法。

• 組件A注入事件服務(wù)的依賴，將自己要傳遞數(shù)據(jù)的數(shù)據(jù)以事件的形式發(fā)布出去。

• 組件B注入事件服務(wù)的依賴，并訂閱相關(guān)事件。

定義一個(gè)服務(wù)

在終端輸入

ng g service event

Angular會自動在項(xiàng)目的app目錄下生成 event.service.ts 和 event.service.spec.ts 兩個(gè)文件。

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

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

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

@Injectable({
  providedIn: 'root'
})
export class EventService {
  // 構(gòu)建Subject的實(shí)例，用來完成事件的發(fā)布和訂閱
  private subject = new Subject < any > ();
  constructor() {}
  publish(value: any, err: any) {
    if (value !== undefined) {
      // 將新的事件放入next隊(duì)列中
      this.subject.next(value);
    }
    if (err !== undefined) {
      // 將錯誤放入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文件中注冊我們的服務(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è)事件類型，實(shí)現(xiàn)多個(gè)不同類型事件的發(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)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。