Динамически загружать компоненты внутри * ngFor в Angular 9

Question

Я изучил код, доступный на angular .io , и повторил его в моем сценарии с mat-tab-group. Однако я хотел бы иметь возможность использовать директиву ad-host внутри *ngFor. Я попробовал это, и директива всегда undefined.

Я искал здесь и, хотя есть несколько вопросов, касающихся этой проблемы, я не нашел четкого примера того, как это сделать. Идея в том, что у меня есть mat-tab-group, состоящий из нескольких mat-tabs, которые загружаются с помощью директивы *ngFor. В каждой вкладке я хотел бы показать разные компоненты в соответствии с выбранным индексом. Есть ли способ достичь этого?

Здесь - это мой модифицированный стек-блиц: как вы можете видеть, буквально он говорит this.adHost is undefined в консоли.

Answer 1

Вам нужно изменить способ, которым вы получаете ссылку на ваш adHost.

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

Он должен быть static: false (см. документация ), поскольку он отображается динамически на mat-tab, так что это не всегда в шаблоне.

И не вызывайте loadComponents в ngOnInit, так как представление еще не было обработано, поэтому adHost будет неопределенным. Используйте ngAfterViewInit например. Я только что прокомментировал это

Исправлен блик стека

Редактировать

После ваших разъяснений я изменил довольно много вещей (удалено ваш setInterval, использованный @ViewChildren вместо ViewChild, используйте ngOnChanges, чтобы узнать, когда визуализировать данные, ...)

Вот пример stackblitz