@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.檢視結果
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQ3chVEa0V3bT9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwFNFpXT4lFVPRTT6hVdsdUZwZlMkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zNwgzNxkzMyIDNwEDM4EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
可以看出結果是一個集合 我自己也有個疑惑,能不能在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中添加的子元件是不會顯示的