在 Angular 9 中動態加載 *ngFor 內部的組件

Question

我研究了 angular.io 上可用的代碼，並使用mat-tab-group在我的場景中復制了它。 但是，我希望能夠在*ngFor中使用 ad-host 指令。 我試過了，指令總是undefined 。

我在這里搜索，雖然有幾個問題可以解決這個問題，但我沒有找到關於如何做到這一點的明確示例。 這個想法是我有一個mat-tab-group由幾個mat-tabs組成，它們是通過*ngFor指令加載的。 在每個選項卡中，我想根據所選索引顯示不同的組件。 有什么辦法可以做到這一點？

這是我修改后的 stackblitz：正如你所看到的，它的字面意思是this.adHost is undefined的。

Answer 1

您需要更改獲取adHost引用的方式。

@ViewChild(AdDirective, {static: false}) adHost: AdDirective;

它需要是static: false （參見文檔），因為它是由mat-tab動態呈現的，所以它並不總是在模板中。

並且不要在ngOnInit中調用loadComponents ，因為視圖還沒有被渲染，所以adHost將是未定義的。 例如使用ngAfterViewInit 。 我只是評論了它。

更正了堆棧閃電戰

編輯

根據您的說明，我更改了很多內容（刪除了您的setInterval ，使用@ViewChildren而不是ViewChild ，使用ngOnChanges知道何時呈現數據等）。

這是stackblitz示例