Angular 7 将动态组件注入到模板中

Question

我有以下代码。当 ngOnInit() 运行时，this.widget 包含正确的组件和 this。 data 包含适当的数据。

我无法弄清楚我们如何将动态组件平滑地插入到模板中，以便结果将等同于 ，其中 DynamicComponent 是 this.widget 中引用的组件。

我尝试了一些在线示例，但无法使它们起作用。有人可以帮忙吗？

import { Component, OnInit, Input } from '@angular/core';
import { IdashService } from '../services/idash.service';

@Component({
  selector: 'app-idash-widget',
  template: `
    <div class="card-body">
      <h5 *ngIf="widgetConfig.title" class="card-title">{{widgetConfig.title}}</h5>

      <!-- I want the component here with the [data] attribute set to this.data -->

    </div>            
  `
})

export class IdashWidgetComponent implements OnInit {

  @Input() widgetConfig;
  widget;
  data;

  constructor(private idashService: IdashService) {
    this.data = {
      someKey: 'someValue'
    }
  }

  ngOnInit() {
    this.widget = this.idashService.moduleConfig.widgets[this.widgetConfig.type];
    console.warn(this.widget, this.data)
  }

}

Answer 1

试试下面的代码看看它是否有效

<template #dynamicContainer></template>

在你的组件中

@ViewChild("dynamicContainer", { read: ViewContainerRef }) container: ViewContainerRef;
componentRef: ComponentRef<DynamicComponent>;
constructor(private resolver: ComponentFactoryResolver) {}

createComponent(type) {
    //Clear the container.
    this.container.clear();
    //Create a factory for component.
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    //Create a component using the factory
    this.componentRef = this.container.createComponent(factory);
    //Pass the value for @Input properties using a component reference instance method.
    this.componentRef.instance.data = this.data;
}

在你的模块中确保将你的组件添加到你的 entryComponents 数组中

entryComponents: [GaugeComponent]