angular - 无法读取未定义的属性 'viewContainerRef'

我正在尝试显示与angular文档中的示例相似(不完全)的动态组件。

我有一个带有viewContainerRef的动态指令

@Directive({
   selector: '[dynamicComponent]'
})
export class DynamicComponentDirective {
   constructor(public viewContainerRef: ViewContainerRef) { }
}

组件代码摘录

@ViewChild(DynamicComponentDirective) adHost: DynamicComponentDirective;
..
ngAfterViewInit() {
let componentFactory = null;
                console.log(component);
                componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
                // this.adHost.viewContainerRef.clear();
                const viewContainerRef = this.adHost.viewContainerRef;
                viewContainerRef.createComponent(componentFactory);
}

最后在模板中添加了<ng-template dynamicComponent></ng-template>

最佳答案

您可以采用这种方法:
不要创建指令，而是给ng-template一个ID

<ng-template #dynamicComponent></ng-template>

在组件类中使用@ViewChild装饰器

@ViewChild('dynamicComponent', { read: ViewContainerRef }) myRef

ngAfterViewInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(component);
    const ref = this.myRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
}