引言

對于稍微接觸過Angular組件的同學(xué)來說，組件間交互應(yīng)該沒有什么問題。

本文想追求的是用一個通俗解釋，幫助自己理解的更準確。

零、知識鋪墊

CSS選擇器

在介紹父子組件之前，先要了解一個概念——selector、選擇器

我們定義一個新組件時，一定會有這個屬性：

@Component({
  selector: 'app-village-edit', ①
  templateUrl: './village-edit.component.html',
  styleUrls: ['./village-edit.component.scss']
})

其中①就是選擇器，就是告訴別的組件，如果想調(diào)用我這個組件，就要使用本組件的選擇器<selectorName></selectorName>來調(diào)用。

本質(zhì)上就是定義了組件的HTML標簽，就像常見的<p>標簽、<button>標簽一樣。

一、什么是父子組件

就像現(xiàn)實中父母和孩子的關(guān)系是相對的一樣，一個人對于它的父母來說，就承擔(dān)了孩子的角色；對于它的孩子來說則承擔(dān)了父母的角色。

父組件和子組件也是相對的。

假設(shè)，一個組件在自己的HTML模板中，通過選擇器（也就是特定的HTML標簽）來調(diào)用其他組件時。我們稱這個組件為父組件，而那個被調(diào)用的組件稱為子組件。

二、父組件調(diào)用子組件的方法

定義了兩個類：

child.component.ts，它的選擇器selector是: 'app-child'

parent.component.ts，它的選擇器selector是: 'app-parent',

此時，在parent組件的HTMl中引用child組件的選擇器：

<app-child></app-child>

這樣就完成了子組件的調(diào)用。
此時，如果通過路由加載父組件，就會發(fā)現(xiàn)子組件也會在特定的位置被渲染出來。

三、父組件向子組件傳值

子組件使用@input裝飾器接收數(shù)據(jù)

子組件從父組件接收的值，會保存到子組件的變量中。

所以用來接收傳值的變量與普通變量唯一的區(qū)別，就是在常規(guī)的變量上增加一個@input()注解。

定義普通變量是這樣的：

master = 'Master';

如果用來接收傳值，只要改成這樣：

@Input() master = 'Master';

這樣，master變量默認是'Master'字符串。

但如果父組件向其傳值，變量就變成了接收的值。

父組件使用方括號[]發(fā)送數(shù)據(jù)

常規(guī)方式調(diào)用子組件：

<app-child></app-child>

如果子組件可以接收數(shù)據(jù)，就可以用[propertyName] = value的方法來傳值。
例如：

<app-child [master]="hero"> </app-child>

用這種寫法可以實現(xiàn)：一旦組件渲染完成后，子組件中的master變量就是'hero'的值了。

當(dāng)父組件中的變量值變化時，子組件也會同步變化，也就是說，子組件可以監(jiān)聽傳過來的值的變化信息。

升級：子組件通過set方法監(jiān)聽傳入數(shù)據(jù)變化

在上面的方式中，對于傳過來的值，雖然可以監(jiān)聽變化，但局限在于：子組件只能直接使用傳入的值。

如果想對傳入的值進行處理或過濾，就要稍微調(diào)整一下子組件。

常規(guī)情況下，子組件是通過給變量加上@Input裝飾器來接收參數(shù)的：

@Input() name = 'name';

如果想處理參數(shù)，只需要把接收傳值的變量變成set方法即可：

@Input() 
get name(): string { return this._name; }
set name(name: string) { 
    // 此處可以增加其他處理邏輯
    this._name = name; 
} 
private _name = '';

此時，_name是內(nèi)部變量，當(dāng)父組件對于name屬性傳入值的時候，會自動執(zhí)行set name方法給_name賦值并增加其他的處理邏輯。

另一種升級：子組件通過ngOnChanges()生命周期鉤子監(jiān)聽傳入數(shù)據(jù)變化

官方文檔中寫到：“當(dāng)需要監(jiān)視多個、交互式輸入屬性的時候，ngOnChanges()比用屬性 setter 方法更合適。”

常規(guī)情況下，子組件是通過給變量加上@Input裝飾器來接收參數(shù)的：

@Input() param1 = 'string1';
@Input() param2 = 'string2';

當(dāng)我們要監(jiān)聽多個變量的變化并做出反應(yīng)時，可以用ngOnChanges()方法：

@Input() param1 = 'string1';
@Input() param2 = 'string2';

ngOnChanges(changes: SimpleChanges) {  ①

    for (const propName in changes) {  ②
    
        // 通過變量名獲取變化信息
        const changedProp = changes[propName];  
        // 獲取上一個值
        const from = JSON.stringify(changedProp.previousValue); ③
        // 獲取當(dāng)前值
        const to = JSON.stringify(changedProp.currentValue);     ④
        // 此處可以添加其他處理過程了 ⑤
     } 
     
}

① 執(zhí)行ngOnChanges()方法時，可以用一個SimpleChanges參數(shù)來獲得當(dāng)前組件所有參數(shù)的變化情況。

② 通過循環(huán)獲得每一個參數(shù)的上一個值和當(dāng)前值。

③ 獲得上一個值④ 獲得當(dāng)前值⑤ 根據(jù)業(yè)務(wù)邏輯添加其他處理過程

注：由于ngOnChanges方法調(diào)用非常頻繁，會導(dǎo)致性能問題或者軟件崩潰，所以建議少用。

四、子組件向父組件傳值

子組件向父組件彈射事件

剛剛講到了子組件如何獲取父組件的傳入的變量，如何監(jiān)聽父組件的變化，以及如何處理傳入的值。

接下來講反向的傳輸：父組件如何監(jiān)聽子組件的變化，并做出反應(yīng)。

定義普通變量是這樣的：

param1 = 'String1';

如果想把這個變量暴露給父組件，需要在變量前加入@output()裝飾器，并且給他賦值一個變量彈射器：

@Output() param1 = new EventEmitter<string>();

此處EventEmitter是變量彈射器，EventEmitter需要一個確定的類型。

但此時，這個param1變量就不能再用等號"="賦值了，如果想讓父組件監(jiān)聽到變化，就需要用彈射方法.emit：

this.param1.emit("String2");

接下來前往父組件。

父組件監(jiān)聽子組件彈射的事件

剛剛已經(jīng)在子組件設(shè)置好了暴露的變量，那么父組件如何接收呢？

常規(guī)的父組件調(diào)用子組件：

<app-child></app-child>

如果想監(jiān)聽子組件的某個變量，可以使用圓括號()：

<app-child (param1)="function1($event)">

</app-child>

$event 是Angular內(nèi)置的事件變量。

function1我們在父組件中定義的處理變化的方法。

使用方式如下：

function1(param2: boolean) { 
    // 這個param2為我們自己定義的參數(shù)名，
    // 本質(zhì)上是子組件中變化的param1參數(shù)，但不用和子組件中的參數(shù)名相同
    // 在此處增加處理過程即可
}

此時，當(dāng)param1的值發(fā)生變化，就會執(zhí)行function1，并且傳入一個事件，事件的實質(zhì)內(nèi)容就是子組件定義的param1參數(shù)。

function1方法把參數(shù)作為param2接收，并添加處理過程。

五、總結(jié)

• Angular中，在HTML通過selector選擇器調(diào)用的組件稱為子組件。
• 父組件向子組件傳值使用方括號[]
• 子組件有兩種方式接收值： @input + 變量名、@Input + set方法
• 子組件想父組件傳遞事件使用EventEmitter
• 父組件接收事件使用圓括號()，并聲明一個處理方法用來調(diào)用

熟悉的風(fēng)格，一圖勝千言：

六、后記

是不是有似曾相識的感覺，在剛開始接觸Angular時就知道，可以使用方括號[]來綁定原生HTML標簽的某些屬性，例如：

<p [id]="sayHelloId" [style.color]="fontColor">
    You can set my color in the component!
</p>

另一方面，還有一個相似之處就是，Angular中也是使用圓括號()來綁定原生HTML標簽的某個方法，例如：

<button (click)="onClick()"> 
    點我！
</button>

這些是巧合嗎？并不是。

我們可以這樣理解：

Angular中所有的原生HTML標簽都變成了組件。

之所以很多標簽中可以用方括號[]綁定屬性、使用圓括號()綁定方法，是因為Angular已經(jīng)為我們擴展了原生的HTML標簽，使它們具備了接收和發(fā)送數(shù)據(jù)的能力！

換言之，在Angular內(nèi)部的組件中，已經(jīng)為我們加上了許許多多的@input和@output裝飾器，我們才能方便的綁定這些屬性和方法。

總結(jié)

到此這篇關(guān)于如何通過簡單的代碼描述Angular父組件、子組件傳值的文章就介紹到這了,更多相關(guān)Angular父組件、子組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論