包含@ViewChildren的父组件不会返回动态创建的组件的结果。
容器组件包含highlight
指令,动态生成的组件在其模板中包含highlight
指令。使用@ViewChildren
查询时,查询长度返回 1 。预期结果为 2 。
从HTML中可以看出,DOM上肯定有两个高亮指令。
<container-component>
<div></div>
<dynamic-component ng-version="4.0.0">
<div highlight="" style="background-color: yellow;">Dynamic!</div>
</dynamic-component>
<div highlight="" style="background-color: yellow;">Number of Highlights
<div></div>
</div>
</container-component>
我错过了什么吗?
https://plnkr.co/edit/LilvHJgFjPHnPuaNIKir?p=preview
容器组件
@Component({
selector: 'container-component',
template: `
<div #contentProjection></div>
<div highlight>Number of Highlights {{highlightCount}}<div>
`,
})
export class ContainerComponent implements OnInit, AfterViewInit {
@ViewChildren(HighlightDirective) private highlights: QueryList<HighlightDirective>;
@ViewChild('contentProjection', { read: ViewContainerRef }) private contentProjection: ViewContainerRef;
constructor(
private resolver: ComponentFactoryResolver
) {
}
ngOnInit() {
this.createDynamicComponent();
}
ngAfterViewInit() {
console.log(this.highlights.length);
// Should update with any DOM changes
this.highlights.changes.subscribe(x => {
console.log(this.highlights.length);
});
}
private createDynamicComponent(){
const componentFactory = this.resolver.resolveComponentFactory(DynamicComponent);
this.contentProjection.createComponent(componentFactory);
}
}
动态组件
@Component({
selector: 'dynamic-component',
template: `
<div highlight>Dynamic!</div>
`,
})
export class DynamicComponent {
}
突出显示指令
@Directive({
selector: '[highlight]'
})
export class HighlightDirective {
constructor(private elementRef: ElementRef) {
elementRef.nativeElement.style.backgroundColor = 'yellow';
}
}
答案 0 :(得分:6)
这不起作用,因为@ViewChildren
只查询自己的视图,而不查询子组件中包含的视图。您的动态组件是具有自己视图的子组件。
要解决此问题,您可以在动态组件中添加@ViewChildren
查询,该查询具有输出事件,以便让任何关心的人(您的父组件)知道存在新实例。