在 *ngIf 中加载动态组件 - createComponent 未定义

Question

当用户单击如下所示的按钮时，我正在尝试将动态组件加载到我的视图中：

<button (click)="showContent()">Show Panel</button>
<!--This starts as 'showPanel = false'-->
<div *ngIf="showPanel">
    <ng-template #ref></ng-template>
</div>

但是，当单击视图中的按钮时，我尝试运行 loadComponent()，但收到一条错误消息，指出 Cannot read property 'createComponent' of undefined

我已经查找了一些解决方案，有人建议使用QueryList<ViewContainerRef>，但我没有成功地让它工作。

来源：ViewContainerRef is undefined when called in ngAfterViewInit

另一个解决方案建议使用 ElementRef 并检查 chaged 状态，但即使在尝试在 ngAfterViewInit 中检查它时也始终未定义。

来源：@ViewChild in *ngIf

我正在寻找适用于 Angular 8 的选项，但我不完全确定下一步该去哪里。

代码如下：

parent.component.ts

export class ParentComponent {

@ViewChild('ref', { static: false, read: ViewContainerRef }) ref: ViewContainerRef;

showPanel = false;

loadComponent(): void {
    const factory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    const component = this.ref.createComponent(factory);
    component.changeDetectorRef.detectChanges();
}

showContent(): void {
    this.showPanel = !this.showPanel;
    this.loadContent(); // Error is thrown here, this doesn't make sense as *ngIf should now be true.
}

Answer 1

按照 yurzui 的想法，我将如何应用它们：

Here 是 StackBlitz 示例。

changeDetectorRef.detectChanges()

showContent () {
    this.showPanel = !this.showPanel;

   if (this.showPanel) {
      this.cdr.detectChanges();
      this.loadComponent();
    }
  }

ViewChild 的设置器

  private _ref: ViewContainerRef;

  private get ref () {
    return this._ref;
  }

  @ViewChild('ref', { static: false, read: ViewContainerRef })
  private set ref (r) {
    console.log('setting ref', r)
    this._ref = r;

    if (this._ref) {
      this.loadComponent();
    }
  }

  showPanel = false;

  constructor (
    private cdr: ChangeDetectorRef,
    private cfr: ComponentFactoryResolver,
  ) { }

  loadComponent () {
    const factory = this.cfr.resolveComponentFactory(ChildComponent);
    const component = this.ref.createComponent(factory);
  }

  showContent () {
    this.showPanel = !this.showPanel;
  }

使用<ng-container>

正如您所指出的，使用ngTemplateOutlet 通常是一个很好的解决方案，但是当您处理多个组件时，在模板中执行所有这些逻辑会变得很麻烦。

我们可以利用 ViewContainerRef's API 处理来自您的组件的所有内容 (.ts file)。

<button (click)="showContent()">Show Panel</button>

<ng-container #vcr></ng-container>

@ViewChild('vcr', { static: true, read: ViewContainerRef })
 vcr: ViewContainerRef;

 showContent () {
  this.showPanel = !this.showPanel;  

  this.showPanel && this.attachComponent();

  !this.showPanel && this.removeComponent();  
}

private attachComponent () {
  const compFactory = this.cfr.resolveComponentFactory(ChildComponent);

  const compView = this.vcr.createComponent(compFactory);
}

private removeComponent () {
    this.vcr.clear();
}

这种方法为您提供了比您可以处理的更多的控制权！
例如，您可以使用vcr.detach 和vcr.insert 在showPanel 变为false 后保留组件的状态。

You can find how right here.

Answer 2

这是因为 *ngIf 在条件评估为 false 时删除了 div 元素，这意味着子元素不存在于您的组件模板中。

您可以使用 [hidden] 代替，它只隐藏 div 元素，以便您可以通过模板引用变量访问它。

<button (click)="showContent()">Show Panel</button>
<!--This starts as 'showPanel = false'-->
<div [hidden]="!showPanel">
    <ng-template #ref></ng-template>
</div>