Angular2中對ViewChild、ContentChild、ViewChildern的了解

@ViewChild()

括号中可以填寫2種類型的參數 Type和string 在ngAfterViewInit鈎子回調前完成。 一個ViewChild比對一個元件，案例：

1.父元件中定義@ViewChild() 簡單來了解就是父元件檢視子元件 那就肯定寫在父元件中了。

@ViewChild('child1')
child1:ChildComponent;            

2.父元件模闆.html檔案

<app-child #child1></app-child>           

3.這樣父元件可以讀取子元件了

@ViewChildren()

通常用來比對多個元素，傳回QueryList集合，在ngAfterViewInit前完成

1.在主元件中定義@ViewChildren()，并設定AfterViewInit鈎子，顯示列印結果

//這裡添加type類型
@ViewChildren(ChildComponent)
childrenlist: QueryList<ChildComponent>;

ngAfterViewInit() {
    console.log(this.childrenlist);
  }           

2.html頁面定義

<app-child></app-child>
<app-child></app-child>
<app-child></app-child>           

3.檢視結果

可以看出結果是一個集合 我自己也有個疑惑，能不能在ViewChildren中添加多個元件，但是沒有實作出來

@ContentChild()

在網上找到的定義 ContentChild 是屬性裝飾器，用來從通過 Content Projection 方式設定的視圖中擷取比對的元素 在AfterContentInit調用前完成

在我了解就是通過ng-content 父元件調用子元件的方法

1.子元件模闆html中添加ng-content

<div class="testcolor">
  child1 works!
  <ng-content></ng-content>
</div>           

2.父元件ContentChild定義

//這裡添加string類型
@ContentChild('childCmp')
childCmp: ChildComponent;           

3.主元件頁面模闆

<div class="testcolor">父元件</div>
<div>
    <app-child #childCmp>子元件</app-child>
</div>           

這裡我定義了app.html中的樣式和child中的樣式用于區分，并且可以通過鈎子來進行測試，通過結果也可看出 父元件對子元件的可以修改，簡單來說就是如果沒有ng-content的話 父元件在app-child中添加的子元件是不會顯示的