Angular 9 中的 @ContentChildren 装饰器用于获取父组件中的所有子组件。下面是一个使用 @ContentChildren 的示例:
在父组件中,假设有一个名为 ParentComponent 的组件,并且有多个子组件子组件 ChildComponent:
import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent implements AfterContentInit {
@ContentChildren(ChildComponent) children: QueryList;
ngAfterContentInit() {
this.children.forEach(child => {
// 在这里可以对每个子组件进行操作
console.log(child);
});
}
}
在子组件中,假设有一个名为 ChildComponent 的组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
`,
})
export class ChildComponent {}
在父组件的模板中使用子组件:
在这个示例中,@ContentChildren(ChildComponent) 用于获取父组件中的所有 ChildComponent 子组件。在父组件的 ngAfterContentInit 生命周期钩子中,可以通过 this.children 对子组件进行操作,例如打印子组件。
当父组件初始化时,ngAfterContentInit 生命周期钩子会被触发,此时可以访问到所有的子组件。
注意:@ContentChildren 只会获取直接在父组件中的子组件,不会获取子组件的子组件。如果需要获取子组件的子组件,可以使用 @ContentChild 加上递归遍历的方式获取。