在Angular 9中,@ContentChildren装饰器有时可能无法正确初始化。这可能是因为它在父组件的ngOnInit生命周期钩子之前调用,导致查询结果为空。
解决这个问题的一个方法是将查询操作移到ngAfterContentInit生命周期钩子中。这个钩子会在父组件的内容投影初始化之后被调用。
下面是一个示例代码,演示了如何解决这个问题:
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() {
// 在ngAfterContentInit中进行查询操作
console.log(this.children);
}
}
在这个示例中,父组件使用@ContentChildren装饰器查询子组件的实例。然后在ngAfterContentInit生命周期钩子中,我们可以访问正确的查询结果。
请确保在模板中正确使用了
希望这个例子能帮助你解决问题!