3

我已经解决了很多与这个 Angular 特性相关的 SO 问题，但没有一个解决方案似乎对我的方案有帮助。我正在使用Angular Material 树组件，并尝试在完全展开的节点中生成一个组件。

我的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());

我在这里做错了什么？

4

0 回答 0