如何實(shí)現(xiàn)angular組件間通訊

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

前言

一個(gè)Angular應(yīng)用一般情況下包含多個(gè)組件，而且要讓組件互相之間能進(jìn)行通訊（數(shù)據(jù)傳送），這樣才能構(gòu)成一個(gè)有機(jī)的完整系統(tǒng)。

1、情景引入

下面例舉一個(gè)實(shí)際遇到的情況：

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

2、組件關(guān)系

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

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

3、通訊方案

了解完組件存在的關(guān)系，相應(yīng)地，組件之間有以下幾種典型的通訊方案：

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

直接調(diào)用

假設(shè)BComponent是AComponent的子組件。

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

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

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

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

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

@ViewChild(BComponent)
private bComponent: BComponent;

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

@Input 和 @Output

同樣假設(shè)BComponent是AComponent的子組件。

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

@Input() 
public title:string;

父組件view上可以這樣設(shè)置 title 這個(gè)參數(shù)（這個(gè)參數(shù)可以是個(gè)父組件想要傳給子組件的變量或?qū)ο蟮龋?/p>

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

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

@Output 的本質(zhì)是事件機(jī)制，我們可以利用它來監(jiān)聽子組件上派發(fā)的事件，子組件上這樣寫：

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

EventEmitter：在angular中組件通過定義EventEmitter 事件彈射器的方式由子組件向父組件發(fā)送數(shù)據(jù)。

selected是一個(gè)事件，觸發(fā) selected 事件的方式如下:

this.selected.emit(對象);

在子組件上定義一個(gè)方法onChange()，使子組件view能夠調(diào)用該方法觸發(fā) selected 事件：

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

父組件可以這樣監(jiān)聽selected事件：

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

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

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

看完這篇關(guān)于如何實(shí)現(xiàn)angular組件間通訊的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。