angular 9, @ContentChildren не инициализируется правильно

Question

У меня есть директива под названием «VerticalTabsDirective» со свойством -

@ContentChildren(MatTabLink) contentChildren: QueryList<MatTabLink>;
@Input() exlVerticalTabs

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

 <nav mat-tab-nav-bar
             [exlVerticalTabs]="selectedIndex">
            <ng-template #recursiveNavList let-tabs="tabs" let-level="level">
                <ng-container *ngFor="let tab of tabs; let i = index">
                    <a mat-tab-link
                       [active]="rla.isActive"
                       [routerLink]="[tab.link]"
                       #rla="routerLinkActive"
                       routerLinkActive>
                            <span>
                               {{tab}}
                            </span>
                    </a>

                    <div>
                        <ng-container *ngTemplateOutlet="recursiveNavList; context: { tabs: tab.subCategories, level: level + 1}"></ng-container>
                    </div>

                </ng-container>
            </ng-template>

            <ng-container *ngTemplateOutlet="recursiveNavList; context: { tabs: profileOutputService.facets, level:0}"></ng-container>

        </nav>

Но когда я отлаживаю свою директиву, я вижу, что свойство «contentChildren» не инициализируется правильно, объект «_results» внутри пуст и не содержит ожидаемых полей «MatTabLink». В других компонентах я использую «VerticalTabsDirective» и «contentChildren» инициализируется правильно, но я не использую рекурсивный ng-шаблон для этих компонентов.

Есть идеи, как заставить это работать?

Answer 1

Я нашел ответ, который может помочь людям - нужно добавить "{Потомки: правда}".

 @ContentChildren(ChildComponent, { descendants: true}) children: QueryList<
    ChildComponent>