Доступ к справочнику дочерних компонентов для Angular @ViewChildren
Я создаю несколько ModuleItemComponents, используя следующую разметку Angular:
<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 — элемент приложения-модуля, а не ModuleItemComponent.
Я уверен, что делаю что-то не так - просто не уверен, как это сделать правильно. Любая помощь приветствуется.
Ответы 1
Вам нужно поместить ссылку на переменную в <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, иначе измените имя класса —