无法读取未定义的属性"viewContainerRef"

问题描述

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

I am trying to display a dynamic component similar (not exact) to the example in angular docs.

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

I have a dynamic directive with 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

You can take this approach:don't create directive, instead give an Id to ng-template

<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();
}

这篇关于无法读取未定义的属性"viewContainerRef"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！