使用Angular 7重新创建以前创建的动态组件

npm install -g @angular/cli

ng new my-dynamic-component

cd my-dynamic-component
ng serve

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `
    <h1>动态组件示例</h1>
    <button (click)="loadComponent()">加载动态组件</button>
    <div #container></div>
  `
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.container.createComponent(componentFactory);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  template: `
    <h2>动态组件</h2>
    <p>这是一个动态组件示例。</p>
  `,
  styles: [`
    h2 { color: blue; }
    p { font-size: 18px; }
  `]
})
export class DynamicComponent {}