动态获取子组件,而不是使用@ViewChild,可以通过使用@ViewChildren装饰器来实现。@ViewChildren装饰器可以用于获取一个组件模板中所有匹配指定选择器的子组件实例。
下面是一些步骤来动态获取子组件:
import { Component, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<app-child></app-child>
<app-child></app-child>
`
})
export class ParentComponent {
@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
}
<app-child></app-child>
。import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<app-child *ngFor="let item of items"></app-child>
`
})
export class ParentComponent implements AfterViewInit {
@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
items: any[] = [1, 2, 3];
ngAfterViewInit() {
this.children.changes.subscribe((list: QueryList<ChildComponent>) => {
// 子组件发生变化时的逻辑处理
});
}
}
通过以上步骤,我们可以动态获取子组件的引用,并在父组件中进行相应的操作。这种方法适用于需要在父组件中对多个子组件进行操作或者监听的场景。
腾讯云相关产品和产品介绍链接地址:
云+社区技术沙龙[第6期]
DBTalk
云+社区技术沙龙[第7期]
北极星训练营
云+社区技术沙龙[第25期]
腾讯位置服务技术沙龙
云+社区技术沙龙[第21期]
云+社区技术沙龙[第8期]
Elastic 中国开发者大会
领取专属 10元无门槛券
手把手带您无忧上云