Angular 6: получить ссылку на компоненты, созданные с помощью * ngFor внутри тега ng-container

Я использую ng-container для перебора списка и создания компонентов

    <ng-container *ngFor="let f of optionsList; let i = index;">

                <!-- component-->
                <app-component  #fieldcmp  *ngIf="isAppComponent(f)" ></app-field>


                <!--another components-->
                <app-anoter-component1 *ngIf="isAnotherComponent1(f)"> </app-anoter-component1>
...
                <app-anoter-componentn *ngIf="isAnotherComponentn(f)"> </app-anoter-componentn>

            </ng-container>

Я хотел бы перечислить компоненты References внутри ng-контейнера.

Я пробовал использовать @ViewChildren ('# fieldcmp') fieldsList: QueryList; и @ContentChildren ('# fieldcmp') fieldsList: QueryList; внутри отцовского компонента, но я не получаю никаких элементов, если пытаюсь получить доступ в ngafterViewInit

ngAfterViewInit() {
        this.fieldsList.forEach((child) => {  /* some logic....*/});
    }

Кто-нибудь может мне помочь? Спасибо

----------- Обновление -----------------------

после исправления с помощью @ViewChildren ('fieldcmp') у меня есть список ElementRef вместо моего AppComponent. Я бросил и все работает

this.filedsList 
            .forEach((child) => { atLeastOneRequired = atLeastOneRequired || (<ReusableFieldComponent> child).isRequired();
    });

спасибо, что помогли


person raffaeleambrosio    schedule 13.09.2018    source источник
comment
Я думаю, это должно быть просто @ViewChildren('fieldcmp') (без знака #, который используется только в шаблоне)   -  person Martin Adámek    schedule 13.09.2018


Ответы (2)


Просто удалите знак # из своего ViewChildren селектора - он используется только в шаблонах:

@ViewChildren('fieldcmp') fieldsList: QueryList;

Или вы можете использовать класс компонента в качестве селектора:

@ViewChildren(HelloComponent) fieldsList: QueryList<HelloComponent>;

Рабочий stackblitz здесь: https://stackblitz.com/edit/angular-xeudlp

person Martin Adámek    schedule 13.09.2018
comment
после исправления с помощью @ViewChildren ('fieldcmp') у меня есть список ElementRef вместо моего AppComponent. Как я могу преобразовать его в свой компонентный тип? - person raffaeleambrosio; 13.09.2018
comment
используйте другой подход для получения экземпляров компонентов (с @ViewChildren(HelloComponent)) - person Martin Adámek; 13.09.2018
comment
с @ViewChildren (HelloComponent) у меня lenght = 0. Я думаю, что проблема в том, что компоненты находятся внутри ‹ng-container›. Для этого существует @ContentChildren, но вместо ViewChildren у меня тоже нет ссылок. - person raffaeleambrosio; 13.09.2018
comment
Что ж, это работает для меня, см. Пример stackblitz, который я предоставил. Я также изменил элемент контейнера на ng-container и все еще работаю, как ожидалось. - person Martin Adámek; 13.09.2018
comment
Пользуюсь кастингом, работает. спасибо за потраченное время - person raffaeleambrosio; 13.09.2018
comment
Кстати, вы можете просто установить тип QueryList<HelloComponent> вместо приведения (как я сделал в другом подходе). - person Martin Adámek; 13.09.2018

Попробуйте создать и очистить directive, затем запросите свою директиву и прочтите ElementRef.

@ViewChildren(MyDirective, {read: Element Ref}) Kids: QueryList<ElementRef>;

У меня нет компьютера передо мной, но идея в этом.

person dK-    schedule 13.09.2018