3-4 在模板中引用多個元素

在父組件內引用子組件的


引用多個的狀況。QueryList是一個泛型

 

實戰

選取圖片。圖片是ngFor循環 會有多個

使用@ViewChildren




在組件初始化裏面輸出看一下

在ngOnInit裏面第一個打印出來，第二個沒有打印出來。

這就是angular的生命週期了。 ngOnInit的時候視圖其實尚未真正的渲染好。咱們在ngOnAfterViewInit裏面打印這個imgs對象，



數組當中有5個元素

視圖在ngOnAfterViewInit內是徹底渲染好的，是能夠安全的使用它。那麼下面單個element爲何能夠在ngOnInit輸出呢？並不說在ngOnInit內就是不行，在某種狀況下ngOnInit也是能夠獲得視圖中的元素。可是很是安全的一點是在ngOnAfterViewInit中去作。
並非說在ngOnInit中就是不行，可是在ngOnAfterViewInit中就必定行。


conole內輸出了各個各個生命週期的函數，影響咱們的顯示，把這些生命週期的 去掉先。


生命週期的相關方法刪除

OnInit也不要了

刪除

再看最終的輸出 相對清晰一下

獲得了images的一組對象，循環

直接操做dom。Renderer2

在構造函數內注入。Renderer2

他會在上面自動引入。在angular/core的包裏面


循環操做圖片的高度

把上面原來直接操做dom的代碼刪掉

若是容許直接操做dom，會引發一些注入攻擊。用rd2去操做dom會增長安全性。rd2操做以前會作驗證。

@ViewChild引用angular的組件

在app.component.html內給子組件起個別名

使用@ViewChild引用


在ngAfterViewInit內輸出這個對象。


、
一個屬性是子組件的imgSilder屬性。

這四個和子組件內屬性都是對應的


若是是angular的組件的話，能夠直接這麼寫

htm內的別名就能夠去掉。

輸出的結果是同樣的
 

因此在@ViewChild中不單能夠起別名，也能夠經過屬性，組件的類型或者指令來去選擇，前提是它是一個angular的組件或者指令。

總結