angular - 如何在 Angular 7 中动态传递另一个组件中的组件

Question

我有一个空的通用表单对话框组件，我想用它以动态方式显示另一个特定表单，而不是静态放置另一个表单的选择器

这是我的 form-dialog.component.ts

import { Component, OnInit} from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { DataEditionMode } from 'src/app/constants/enum';

@Component({
selector: 'app-form-dialog',
templateUrl:  './form-dialog.component.html',
styleUrls: ['./form-dialog.component.css']
})
export class FormDialogComponent implements OnInit {
 dataEditionMode:DataEditionMode
 editedInstance:any
 component:any
 tagName:any

 constructor(@Inject(MAT_DIALOG_DATA) public data: any,
  public matDialogRef: MatDialogRef<FormDialogComponent>) { 
   this.dataEditionMode = data["dataEditionMode"];
   this.editedInstance = data["editedInstance"];
   this.component=data["component"]; //Contain the name of my specific form (DemandeFormComponent OR CommandeFormComponent ...)
 }

 ngOnInit() {
 }

 cancel() {
  this.matDialogRef.close({
   "status": "canceled"
  });
 }
}

这是我的form-dialog.component.html

<div [ngSwitch]="component">
    <app-form-demande   *ngSwitchCase="'DemandeFormComponent'" ></app-form-demande>
    <app-form-commande   *ngSwitchCase="'CommandeFormComponent'" ></app-form-commande>
</div>

我不想使用 ngSwitch 并编写每个表单的选择器...

有动态的想法吗？

Answer 1

我通常为此目的使用专用组件，如下所示:

export class ComponentHostComponent implements OnInit {

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    private changeDetectorRef: ChangeDetectorRef) { }

  ngOnInit() {
  }

  @Input()
  set component(component: any) {
    this.viewContainerRef.clear();
    if (component) {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
      const componentRef = this.viewContainerRef.createComponent(componentFactory);
    }
  }
}

你可以像这样在你的模板中应用这个组件

<app-component-host [component]="component"></app-component-host>

我创建了一个关于如何执行此操作的最小堆栈 Blitz :https://stackblitz.com/edit/angular-ogjs95 .请注意，必须将使用 ComponentFactoryResolver 创建的组件添加到 AppModule 的 entryComponents 数组中。