在Angular7中单击按钮时加载组件

<button (click)="loadComponent()">点击加载组件</button>

import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { TargetComponent } from './target.component';

@Component({
  selector: 'app-button',
  template: '<button (click)="loadComponent()">点击加载组件</button>',
})
export class ButtonComponent {
  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  loadComponent() {
    // 使用ComponentFactoryResolver来解析目标组件
    const factory = this.resolver.resolveComponentFactory(TargetComponent);

    // 使用ViewContainerRef来获取容器视图引用，并创建目标组件实例
    const componentRef = this.container.createComponent(factory);
  }
}

<p>这是被加载的目标组件</p>

<app-button></app-button>