如何在Angular中动态导入组件？

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-dynamic-component-loader',
  template: '<ng-container #dynamicComponentContainer></ng-container>'
})
export class DynamicComponentLoaderComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
}

import { Component, OnInit } from '@angular/core';
import { DynamicComponentLoaderComponent } from './dynamic-component-loader.component';
import { DynamicComponent } from './dynamic.component'; // 要动态加载的组件

@Component({
  selector: 'app-example',
  template: `
    <button (click)="loadDynamicComponent()">加载动态组件</button>
    <app-dynamic-component-loader></app-dynamic-component-loader>
  `
})
export class ExampleComponent implements OnInit {
  constructor(private dynamicComponentLoader: DynamicComponentLoaderComponent) { }

  ngOnInit() { }

  loadDynamicComponent() {
    const componentFactory = this.dynamicComponentLoader.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.dynamicComponentLoader.dynamicComponentContainer.createComponent(componentFactory);
  }
}