Angular 8动态添加组件“未定义的viewContainerRef”错误

Posted 2023-02-26

【中文标题】Angular 8动态添加组件“未定义的viewContainerRef”错误

【英文标题】：Angular 8 adding component dynamically "viewContainerRef of undefined" error

【发布时间】：2020-06-06 14:59:15

【问题描述】：

我正在学习 Angular 并尝试以编程方式将组件添加到我的 html 中。但是，我收到以下错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'viewContainerRef' of undefined

以下是代码的关键部分。

我的占位符指令：

import  Directive, ViewContainerRef  from '@angular/core';

@Directive(
  selector: '[appPlaceholder]'
)
export class PlaceholderDirective 
  constructor(public viewContainerRef: ViewContainerRef) 

Main.component.ts：

export class MainComponent implements OnInit 
  @ViewChild(PlaceholderDirective, static: false, read: ViewContainerRef) alertHost: PlaceholderDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) 

  ngOnInit(): void 
    this.showMyComp();
  

  private showMyComp() 
    const testCmpFactory = this.componentFactoryResolver.resolveComponentFactory(TestComponent);
    const hostViewContainerRef = this.alertHost.viewContainerRef;
    hostViewContainerRef.clear();

    hostViewContainerRef.createComponent(testCmpFactory);
  

Main.component.html：

<ng-template appPlaceholder></ng-template>

我已将问题缩小到 MainComponent.ts 中的 const hostViewContainerRef = this.alertHost.viewContainerRef;。问题是 this.alertHost 为空，但我一直无法弄清楚原因。

【参考方案1】：

我知道这是一个老问题，但几天前我遇到了同样的问题： 从 ngOnInit() 调用使用 alertHost 的方法。

为确保@ViewChild 注入的引用存在，总是使用 ngAfterViewInit() 编写初始化代码。

除了从 ngAfterViewIinit 调用 showMyComp 之外，我还必须将 @ViewChild 更新为以下内容：

@ViewChild(PlaceholderDirective, static: false) alertHost: PlaceholderDirective;

（这部分可能是由于不同的角度版本造成的）