訪問 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，否則更改為類的名稱-