Angular 动态组件

在Angular中，动态组件是指在运行时动态加载和渲染的组件。使用动态组件可以实现更灵活的应用程序结构，允许根据条件或用户交互来动态加载组件。以下是实现动态组件的基本步骤：

1. 创建动态组件：首先，你需要创建一个动态组件。这是一个普通的 Angular 组件，但它必须通过 entryComponents 数组在模块中注册，以便 Angular 知道在运行时如何加载它。

    // 动态组件
    @Component({
      selector: 'app-dynamic-component',
      template: '<p>This is a dynamic component!</p>'
    })
    export class DynamicComponent { }

    // 在模块中注册动态组件
    @NgModule({
      declarations: [
        DynamicComponent
      ],
      entryComponents: [DynamicComponent] // 必须在 entryComponents 数组中注册
    })
    export class AppModule { }

2. 使用 ComponentFactoryResolver：在要动态加载组件的地方，你需要使用 ComponentFactoryResolver 来获取组件工厂（ComponentFactory）。

    import { ComponentFactoryResolver, ComponentRef, Injectable, Injector } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class DynamicComponentService {
      constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector) { }

      createDynamicComponent(): ComponentRef<DynamicComponent> {
        const factory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
        const componentRef = factory.create(this.injector);
        return componentRef;
      }
    }

3. 将动态组件添加到视图：使用 ViewContainerRef 来获取视图容器，然后使用 createComponent 方法将动态组件添加到视图中。

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

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

      constructor(private dynamicComponentService: DynamicComponentService) { }

      loadDynamicComponent() {
        const componentRef = this.dynamicComponentService.createDynamicComponent();
        this.dynamicComponentContainer.insert(componentRef.hostView);
      }
    }

4. 销毁动态组件：当不再需要动态组件时，需要手动销毁它，以释放资源。

    import { ComponentRef, OnDestroy } from '@angular/core';

    @Component({
      selector: 'app-container',
      template: '<ng-container #dynamicComponentContainer></ng-container>'
    })
    export class ContainerComponent implements OnDestroy {
      private componentRef: ComponentRef<DynamicComponent>;

      @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

      constructor(private dynamicComponentService: DynamicComponentService) { }

      loadDynamicComponent() {
        this.componentRef = this.dynamicComponentService.createDynamicComponent();
        this.dynamicComponentContainer.insert(this.componentRef.hostView);
      }

      ngOnDestroy() {
        if (this.componentRef) {
          this.componentRef.destroy();
        }
      }
    }

通过这些步骤，你就可以在运行时动态加载和渲染组件。动态组件的使用场景包括模态框、弹出式菜单、动态表单等，可以根据应用程序的需求进行灵活的定制。

转载请注明出处：http://www.pingtaimeng.com/article/detail/4916/Angular