Я рассмотрел довольно много других вопросов по SO, связанных с этой угловой функцией, и ни одно из решений, похоже, не помогает моему сценарию. Я использую компонент дерева угловых материалов и пытаюсь создать компонент в полностью развернутом узле.

Мой Tree.component.html :

 <ng-container class="tree-content">
    <mat-card>
        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
            <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
                <ng-container *ngIf="node.expandable">
                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle '   node.name" (click)="generateTreeContent(node, treeControl.isExpanded(node))">
                        <mat-icon class="dark">
                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                        </mat-icon>
                    </button>
                    <p>{{node.name}}</p>
                </ng-container>
                <app-dynamic></app-dynamic>
            </mat-tree-node>
        </mat-tree>
    </mat-card>
</ng-container>
 

Мое ViewChildren объявление декоратора в Tree.component.ts :

 @ViewChildren(DynamicComponent) children: QueryList<DynamicComponent>;
 

Мой Dynamic.component.ts :

 @Component({
    selector: 'app-dynamic',
    templateUrl: './Dynamic.component.html',
    styleUrls: ['./Dynamic.component.scss']
})
export class DynamicComponent implements OnInit, AfterViewChecked {
    constructor(public componentFactoryResolver: ComponentFactoryResolver, public viewContainerRef: ViewContainerRef, public changeDetectorRef: ChangeDetectorRef, public ref: ElementRef) {
    }
    ...
}
 

Каждый раз , когда я пытаюсь получить доступ children , QueryList это не дает никаких результатов.

Другие вещи, которые я пробовал:

• Использование свойства метаданных «чтение»:

  *.ts :

   @ViewChildren('dynamic', { read: DynamicComponent }) children: QueryList<DynamicComponent>;
   

  *.html :

   <app-dynamic #dynamic></app-dynamic>
   

• Подписка на QueryList изменения через AfterViewInit() :

   public ngAfterViewInit(): void { 
      this.children.changes.subscribe((c: QueryList<DynamicComponent>) =>
      {
        ...
      });
  }
   

• Использование ContentChildren (как с параметром ‘read’, так и без него):

  *.ts :

   @ContentChildren('dynamic', { read: DynamicComponent }) children: QueryList<DynamicComponent>;
   

  *.html :

   <app-dynamic #dynamic></app-dynamic>
   

• Доступ к компоненту с помощью директивы:

   @ViewChildren('dynamic', { read: DynamicDirective }) children: QueryList<DynamicDirective>;
   

• Доступ после принудительного обнаружения изменений:

   this.viewContainerRef.detectChanges();
  console.log(this.children.toArray());
   

Что я здесь делаю не так?