时间戳

首页 > 解决方案 > 访问 Angular @ViewChildren 的子组件参考

angular - 访问 Angular @ViewChildren 的子组件参考

问题描述

我正在使用以下 Angular 标记创建多个 ModuleItemComponents：

<div #moduleItems *ngFor="let module of seriesItem.modules; let i = index">
    <app-module-item [videoModule]="module" ></app-module-item>    
</div>

以下代码位于相应的 .ts 文件中：

  @ViewChildren('moduleItems') moduleItems;

我在 ngAfterViewInit 事件中使用代码来尝试获取对每个 ModuleItemComponent 的引用：

ngAfterViewInit() {
   let items: [];
   items = this.moduleItems.map((m) => m.nativeElement.firstChild);
   items.forEach((m) => {
     const thisModule = (m as ModuleItemComponent);
     thisModule.onSelectionMade.subscribe((result: VideoModule) => {
       this.deselectOthers(result);
     });
   });
 }

但是，我在“.subscribe”行出现错误，因为 thisModule 的类型是 app-module-item，而不是 ModuleItemComponent。

在此处输入图像描述

我确定我做错了什么 - 只是不知道如何正确地做到这一点。任何帮助表示赞赏。

标签： angularviewchildren

解决方案

您需要将变量引用放在<app-module-item>

<app-module-item #moduleItems ...>

但是在这种情况下，你可以使用自己的类名而忘记变量引用

@ViewChildren(ModuleItemComponent) moduleItems:QueryList<ModuleItemComponent>

你可以做

ngAfterViewInit()
{
 
   this.moduleItems.forEach(item=>{
        ..item is a ModuleItemComponent.. 
        ..you has access to all his properties..
        ..e.g. item.onSelectionMade.subscribe(....)
    })
}

看到类的名称不在引号之间-我假设类的名称是 ModuleItemComponent，否则更改为类的名称-

推荐阅读