如何在angular 8+中显示动态组件

在Angular 8+中显示动态组件可以通过以下步骤实现：

1. 创建动态组件：首先，需要创建一个动态组件。动态组件是一个可重用的组件，可以在运行时动态加载和显示。可以使用Angular的ComponentFactoryResolver来创建动态组件。动态组件需要包含在一个NgModule中，并且需要在entryComponents数组中进行声明。
2. 创建宿主容器：在需要显示动态组件的地方，需要创建一个宿主容器。宿主容器是一个普通的HTML元素，用于容纳动态组件。
3. 获取组件工厂：使用ComponentFactoryResolver的resolveComponentFactory方法来获取动态组件的工厂。
4. 创建组件实例：使用组件工厂的create方法来创建动态组件的实例。
5. 设置组件属性：如果需要向动态组件传递数据，可以使用动态组件实例的属性来设置。
6. 将组件添加到宿主容器：使用宿主容器的createComponent方法将动态组件添加到宿主容器中。

下面是一个示例代码：

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

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

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    // 获取动态组件的工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // 创建动态组件的实例
    const componentRef = this.container.createComponent(componentFactory);

    // 设置组件属性
    componentRef.instance.data = '动态组件数据';
  }
}

在上面的示例中，AppComponent是一个包含宿主容器和按钮的组件。当点击按钮时，会调用loadComponent方法。loadComponent方法中，首先使用ComponentFactoryResolver的resolveComponentFactory方法获取动态组件的工厂。然后使用宿主容器的createComponent方法创建动态组件的实例。最后，可以通过componentRef.instance来设置动态组件的属性。

请注意，上述示例中的DynamicComponent是一个动态组件，需要在NgModule中进行声明，并在entryComponents数组中进行注册。

这是一个简单的示例，你可以根据实际需求进行扩展和定制。关于Angular的动态组件更多的信息，你可以参考腾讯云的Angular文档：Angular动态组件。