Блог

Главная - Вопросы по программированию - Угловой вид детей, возвращающий неопределенный

Угловой вид детей, возвращающий неопределенный

#javascript #angular #angular-material #viewchildren

Вопрос:

Я рассмотрел довольно много других вопросов по 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());

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

Комментарии:

1. В вашем Tree.component.ts случае, когда вы пытаетесь получить доступ к детям? Вы не сможете получить к ним доступ, ngOnInit() это произойдет undefined в этот момент.

2. Я пытаюсь получить доступ к дочерним элементам в функции generateTreeContent, вызываемой в (щелчке), определенной в html. И я также попытался изменить подписку на дочернее свойство, которое должно обновляться с каждым изменением.

3. Я предполагаю, что <app-dynamic> это в инспекторе, это правильно?

4. Да, я вижу бирку в «Инспекторе».

5. Когда вы подписываетесь на изменения, вы когда-нибудь получаете подписку для выполнения? Даже если вы расширите дерево?

Метки: ,