Почему ViewChild не видит динамически созданные div?

Question

[Дмитрий]

Когда в цикле генерируется верстка, созданный таким образом
<div #componentXX></div>
не находится через ViewChild('component1') Block1;

<div class="row">
    <div class="col-3" id="{{block.component_name}}" *ngFor="let block of blocks">
        {{block.component_name}}
        <div [ngSwitch]="block.component_name">
            <div *ngSwitchCase="'DashboardBlock1Component'" style="{{Style1}}"  >
                 <div #component1></div>
            </div>
            <div *ngSwitchCase="'DashboardBlock2Component'" >
                 <div #component2></div>
            </div>
            <div *ngSwitchDefault>
                <div #component3></div>
            </div>
        </div>
    </div>
</div>

Что можно сделать? чтобы в сгенерированных componentXX можно было создать компоненты?
без viewContainerRef их не создать, а viewContainerRef можно получить же только через ViewChild?
Может над какую-нибудь функцию вызвать в ngAfterViewInit ?

Comments

[Алексей Зуев]

А почему просто не использовать директиву, которая будет создавать компоненты вместо всяких ngSwitch? У ViewChild можно за сеттером следить, или использовать ViewChildren. Но директива будет лучшим решением. Сразу 3 зайцев убьете

<div *ngFor="let block of blocks"><ng-container *myDynamicComponent="block"></ng-container></div>

Или может вам вообще ngComponentOutlet подойдет

Answer 1

[Makito]

Недавно столкнулся с аналогичной задачей - нужно было собрать все динамически сгенерированные компоненты со страницы.
Для этого использовал декоратор ViewChildren и QueryList.

@ViewChildren(Combobox) combo: QueryList<Combobox> = new QueryList<Combobox>();

После этого все компоненты со страницы будут доступны в combo в виде массива
this.combo.toArray();
Так же на него можно навесить обсервер для отслеживания добавляемых компонент динамически
this.combo.changes.subscribe(...);
Так же помимо ViewChildren есть ContentChildren, возможно как раз таки он вам и подойдёт.
Похоже вам копать в эту сторону.

Comments

[Алексей Зуев]

А можете подсказать, как в его случае поможет ContentChildren?

[Makito]

Алексей Зуев: я не говорил что он ему поможет, я сказал что "возможно", я сам доку по нему не читал но исходя из аналогии. Если вы знаете ответ - поделитесь.