访问 Angular @ViewChildren 的子组件引用

Question

我正在使用以下 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。

我确定我做错了什么 - 只是不确定如何正确地做这件事。任何帮助表示赞赏。

Answer 1

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

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

但在这种情况下，您可以使用 class 自己的名称而忘记变量引用

@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(....)
    })
}

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

访问 Angular @ViewChildren 的子组件引用

Access to child component reference for Angular @ViewChildren

angular

viewchildren