怎么在Angular中實現不同組件間的數據傳遞

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

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

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

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

• 定義一個服務，用來實現事件的發布和訂閱方法。

• 組件A注入事件服務的依賴，將自己要傳遞數據的數據以事件的形式發布出去。

• 組件B注入事件服務的依賴，并訂閱相關事件。

定義一個服務

在終端輸入

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。