Neutrino's Blog

前言

連續發了 20 幾天的文，能講的也都講了，邁向神乎其技之路只剩下掌握小地方了吧！
之前介紹過 <ng-content> 跟 ContentChild，還有個很類似的是 @ViewChild裝飾器，接著就來看看這是甚麼吧！

這篇建議搭配前一篇一起看。

@ViewChild

直接來看範例，這個範例大致跟 @ContentChild 的範例很像，但做了一點修改，晚點我們會做比較。

app.ts

import {Component}       from 'angular2/core';
import {ParentComponent} from './parent';
import {ChildComponent}  from './child';
@Component({

selector: 'my-app',

template:         <h2>App Component</h2>         <my-parent></my-parent>    ,

directives:[ParentComponent,ChildComponent]

})

export class AppComponent {

}

注意到 <my-parent></my-parent> 裡面不用包 <my-child> 了。

child.ts

import {Component} from 'angular2/core';
@Component({

selector: 'my-child',

template:         <div>Child Component</div>    

})

export class ChildComponent {

name:string = 'childName';

}

child 保持不變

parent.ts

import {Component,ViewChild,AfterViewInit} from 'angular2/core';
import {ChildComponent}         from './child';
@Component({

selector: 'my-parent',

template:        <div>Parent Component</div>        <my-child></my-child>    ,

directives:[ChildComponent]

})

export class ParentComponent implements AfterViewInit{

@ViewChild(ChildComponent)

child:ChildComponent;
ngAfterViewInit() {
    console.log(this.child)
}

}

改成用 @ViewChild，一樣可以取得 child 的組件內容，不過要在 AfterViewInit 之後才會生效。

如果改成這樣

template: `
       <div>Parent Component</div>
       <my-child></my-child>
       <p>{{child.name}}</p>
    `

則會

因為你在他生效前就呼叫了！

---

Plunker

可以看到 child 在 parent 中被呼叫了

所以 @ViewChild 跟直接引入組件使用差在哪？

差在如果我們在 parent 的模板沒有使用到 <my-child> 的話，@ViewChild 就會無法調用 child 的組件內容。而如果直接引用 child 組件的話，不使用標籤也沒關係。

區分 @ContentChild 和 @ViewChild

• @ContentChild 是組件中 selector 標籤閉合之間的子組件，意思就是在 AppComponent 中 <my-parent> 裡面必須要包含 <my-child>，換言之決定權在「使用 <my-parent> 的組件」手上，也就是有 @ContentChild 的上一層。
• @ViewChild 是組件模板當中的子組件，決定權在當前組件。

兩者都有複數形式，@ContentChildren 和 @ViewChildren

什麼時候獲取到子組件的值？

• @ContentChild 在父組件生命週期函數 ngAfterContentInit 之後可以獲取到
• @ViewChild 在父組件生命週期函 ngAfterViewInit 之後可以獲取到