用簡單的程式碼描述Angular父元件、子元件傳值

LYX6666發表於2022-03-21
Angular元件

對於稍微接觸過Angular元件的同學來說，元件間互動應該沒有什麼問題。
本文想追求的是用一個通俗解釋，幫助自己理解的更準確。

零、知識鋪墊

CSS選擇器

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

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

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

其中①就是選擇器，就是告訴別的元件，如果想呼叫我這個元件，就要使用本元件的選擇器<selectorName></selectorName>來呼叫。

本質上就是定義了元件的HTML標籤，就像常見的<p>標籤、<button>標籤一樣。

一、什麼是父子元件

就像現實中父母和孩子的關係是相對的一樣，一個人對於它的父母來說，就承擔了孩子的角色；對於它的孩子來說則承擔了父母的角色。

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

假設，一個元件在自己的HTML模板中，通過選擇器（也就是特定的HTML標籤）來呼叫其他元件時。我們稱這個元件為父元件，而那個被呼叫的元件稱為子元件。

二、父元件呼叫子元件的方法

定義了兩個類：

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

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

<app-child></app-child>

這樣就完成了子元件的呼叫。
此時，如果通過路由載入父元件，就會發現子元件也會在特定的位置被渲染出來。

三、父元件向子元件傳值

子元件使用@input裝飾器接收資料

子元件從父元件接收的值，會儲存到子元件的變數中。
所以用來接收傳值的變數與普通變數唯一的區別，就是在常規的變數上增加一個@input()註解。

定義普通變數是這樣的：

master = 'Master';

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

@Input() master = 'Master';

這樣，master變數預設是'Master'字串。

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

父元件使用方括號[]傳送資料

常規方式呼叫子元件：

<app-child></app-child>

如果子元件可以接收資料，就可以用[propertyName] = value的方法來傳值。
例如：

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

用這種寫法可以實現：一旦元件渲染完成後，子元件中的master變數就是'hero'的值了。

當父元件中的變數值變化時，子元件也會同步變化，
也就是說，子元件可以監聽傳過來的值的變化資訊。

升級：子元件通過set方法監聽傳入資料變化

在上面的方式中，對於傳過來的值，雖然可以監聽變化，但侷限在於：子元件只能直接使用傳入的值。
如果想對傳入的值進行處理或過濾，就要稍微調整一下子元件。

常規情況下，子元件是通過給變數加上@Input裝飾器來接收引數的：

@Input() name = 'name';

如果想處理引數，只需要把接收傳值的變數變成set方法即可：

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

此時，_name是內部變數，當父元件對於name屬性傳入值的時候，會自動執行set name方法給_name賦值並增加其他的處理邏輯。

另一種升級：子元件通過ngOnChanges()生命週期鉤子監聽傳入資料變化

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

常規情況下，子元件是通過給變數加上@Input裝飾器來接收引數的：

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

當我們要監聽多個變數的變化並做出反應時，可以用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); ③
        // 獲取當前值
        const to = JSON.stringify(changedProp.currentValue);     ④
        // 此處可以新增其他處理過程了 ⑤
     } 
     
}

① 執行ngOnChanges()方法時，可以用一個SimpleChanges引數來獲得當前元件所有引數的變化情況。
② 通過迴圈獲得每一個引數的上一個值和當前值。
③ 獲得上一個值
④ 獲得當前值
⑤ 根據業務邏輯新增其他處理過程

注：由於ngOnChanges方法呼叫非常頻繁，會導致效能問題或者軟體崩潰，所以建議少用。

四、子元件向父元件傳值

子元件向父元件彈射事件

剛剛講到了子元件如何獲取父元件的傳入的變數，如何監聽父元件的變化，以及如何處理傳入的值。

接下來講反向的傳輸：父元件如何監聽子元件的變化，並做出反應。

定義普通變數是這樣的：

param1 = 'String1';

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

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

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

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

this.param1.emit("String2");

接下來前往父元件。

父元件監聽子元件彈射的事件

剛剛已經在子元件設定好了暴露的變數，那麼父元件如何接收呢？

常規的父元件呼叫子元件：

<app-child></app-child>

如果想監聽子元件的某個變數，可以使用圓括號()：

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

</app-child>

$event 是Angular內建的事件變數。
function1我們在父元件中定義的處理變化的方法。
使用方式如下：

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

此時，當param1的值發生變化，就會執行function1，並且傳入一個事件，事件的實質內容就是子元件定義的param1引數。
function1方法把引數作為param2接收，並新增處理過程。

五、總結

  • Angular中，在HTML通過selector選擇器呼叫的元件稱為子元件。
  • 父元件向子元件傳值使用方括號[]
  • 子元件有兩種方式接收值： @input + 變數名、@Input + set方法
  • 子元件想父元件傳遞事件使用EventEmitter
  • 父元件接收事件使用圓括號()，並宣告一個處理方法用來呼叫

熟悉的風格，一圖勝千言：
Pasted image 20220321180019.png

六、後記

是不是有似曾相識的感覺，在剛開始接觸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已經為我們擴充套件了原生的HTML標籤，使它們具備了接收和傳送資料的能力！

換言之，在Angular內部的元件中，已經為我們加上了許許多多的@input和@output裝飾器，我們才能方便的繫結這些屬性和方法。

相關文章