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

在Angular 7中，当单击按钮时加载组件可以通过以下步骤实现：

首先，创建一个按钮组件，可以使用Angular的模板语法和事件绑定来定义按钮的外观和行为。例如，可以在组件的HTML模板中添加一个按钮元素，并使用(click)事件绑定来触发加载组件的操作。

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

在组件的Typescript文件中，定义loadComponent()方法来处理按钮点击事件。在该方法中，可以使用Angular的动态组件加载功能来加载目标组件。

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);
  }
}