天天看點

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.檢視結果

Angular2中對ViewChild、ContentChild、ViewChildern的了解
Angular2中對ViewChild、ContentChild、ViewChildern的了解

可以看出結果是一個集合 我自己也有個疑惑,能不能在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中添加的子元件是不會顯示的

Angular2中對ViewChild、ContentChild、ViewChildern的了解