如何實現angular組件間通訊

小編這次要給大家分享的是如何實現angular組件間通訊，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

前言

一個Angular應用一般情況下包含多個組件，而且要讓組件互相之間能進行通訊（數據傳送），這樣才能構成一個有機的完整系統。

1、情景引入

下面例舉一個實際遇到的情況：

上圖頁面包含兩個組件，“新增班級組件”和“選擇教師組件”，在新增班級時需要選擇改班級的管理教師，管理教師列表要從數據庫中獲取。選擇好教師后，“選擇教師組件”要把選擇的教師對象傳遞回“新增班級組件”，這其中涉及到對象傳遞稱為通訊。

2、組件關系

組件之間有幾種典型的關系：父子關系、兄弟關系、沒有直接關系

父子關系說明：有A、B兩個組件（不一定在同一個模塊），如果A組件的view頁面中引用了B的selector標簽，則稱A為B的父組件，或B為A的子組件。

3、通訊方案

了解完組件存在的關系，相應地，組件之間有以下幾種典型的通訊方案：

• 直接的父子關系：父組件直接訪問子組件的 public 屬性和方法
• 直接的父子關系：借助于 @Input 和 @Output 進行通訊
• 沒有直接關系：借助于 Service 單例進行通訊
• 利用 cookie 和 localstorage 進行通訊
• 利用 session 進行通訊
   

直接調用

假設BComponent是AComponent的子組件。

對于有直接父子關系的組件，父組件可以直接訪問子組件里面 public 型的屬性和方法，示例代碼片段如下：

<B #child></B> 
<button (click)="child.childFunction()">調用子組件方法</button>

顯然，子組件B里面必須暴露一個 public 型的 childFunction 方法，就像這樣：

public childFunction():void{ console.log("子組件的名字是"）; }

以上是通過在模板里面定義局部變量的方式來直接調用子組件里面的 public 型方法。在父組件的內部也可以訪問到子組件的實例，需要利用到 @ViewChild 注解，示例如下：

@ViewChild(BComponent)
private bComponent: BComponent;

如果通過 @ViewChild 注解，父組件直接訪問子組件，那么兩個組件之間的關系就被固定死了。父子兩個組件緊密依賴，誰也離不開誰，不能單獨使用了。盡量避免這樣做。

@Input 和 @Output

同樣假設BComponent是AComponent的子組件。

我們可以利用 @Input 裝飾器，讓父組件直接給子組件傳遞參數，子組件BComponent上這樣寫：

@Input() 
public title:string;

父組件view上可以這樣設置 title 這個參數（這個參數可以是個父組件想要傳給子組件的變量或對象等）：

<B title="Hello Angular"></B>

前面是父組件->子組件傳遞數據，過程相對簡單，下面是子組件->父組件傳數據，過程較復雜。

@Output 的本質是事件機制，我們可以利用它來監聽子組件上派發的事件，子組件上這樣寫：

@Output() 
public selected=new EventEmitter<要傳給父組件的對象類型>();

EventEmitter：在angular中組件通過定義EventEmitter 事件彈射器的方式由子組件向父組件發送數據。

selected是一個事件，觸發 selected 事件的方式如下:

this.selected.emit(對象);

在子組件上定義一個方法onChange()，使子組件view能夠調用該方法觸發 selected 事件：

onChange() { 
 this.selected.emit(要傳給父組件的對象); 
}

父組件可以這樣監聽selected事件：

<B (selected)&#10122;="onTeacherSelected($event)①"></B>

使用我們剛剛在子組件中定義的@Output() selected

① 方法名需要在父組件C層中定義，用于接收子組件傳過來的事件，而參數名可以隨性起，但我們一般為起名為$event以示此處為該組件的一個彈射器。

看完這篇關于如何實現angular組件間通訊的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。