如何在 Angular 中创建和销毁动态组件

介绍 

首先，我们需要安装 Angular CLI。安装 Angular CLI 和基本项目设置后，请按照以下步骤操作。 

在这里，我还添加了一个带有基本角度项目创建的组件。 

组件的名称是 dynamicrestory.component.ts

只需按照 app.module.ts 页面中的以下代码 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { dynamicrestoryComponent } from './dynamicrestory.component';
@NgModule({
  declarations: [
    AppComponent,
    dynamicrestoryComponent
  ],
  entryComponents: [ dynamicrestoryComponent ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

通常使用组件模板中的组件选择器加载组件，该组件模板在 Angular 编译时标识。

组件也可以在运行时使用 ComponentFactory、ComponentFactoryResolver 和 ViewContainerRef 动态加载。

那些需要动态加载的组件也应该在 app.module.ts 文件中 @NgModule 装饰器的 entryComponents 元数据中配置。

ComponentFactory

ComponentFactory 用于创建组件的实例。

ComponentFactoryResolver

ComponentFactoryResolver 为特定组件解析 ComponentFactory。

// Create a factory for dynamicrestoryComponent.
const new_component_factory = this.resolver.resolveComponentFactory(dynamicrestoryComponent);

ViewContainerRef 

ViewContainerRef 表示我们可以附加一个或多个视图的容器。

ViewContainerRef 和 createComponent 的一些重要方法用于附加基于 TemplateRef 的嵌入式视图。createComponent() 组件并将其宿主视图插入到视图容器中指定索引处。在我们的动态组件加载器中，它将使用 ViewContainerRef 的 createComponent() 加载组件。 

// Create a component using the factory.
this.componentRef = this.alertContainer.createComponent(new_component_factory);

新建组件的 ComponentRef 并调用 ViewContainerRef 的 clear() 方法会破坏容器中现有的视图。 

// Clear the container alertContainer: ViewContainerRef;
this.alertContainer.clear();

import {
    Component,
    ViewChild,
    ViewContainerRef,
    ComponentFactoryResolver,
    ComponentRef
} from '@angular/core';
import {
    dynamicrestoryComponent
} from './dynamicrestory.component';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('messageContainer', {
        read: ViewContainerRef
    })
    alertContainer!: ViewContainerRef;
    componentRef!: ComponentRef < dynamicrestoryComponent > ;
    constructor(private resolver: ComponentFactoryResolver) {}
    createComponent(componentname: string) {
        // Clear the container.
        this.alertContainer.clear();
        // Create a factory for MessageComponent.
        const factory = this.resolver.resolveComponentFactory(dynamicrestoryComponent);
        // Create a component using the factory.
        this.componentRef = this.alertContainer.createComponent(factory);
        // Pass the value for @Input properties using a component reference instance method.
        this.componentRef.instance.dynamicrestory_msg = componentname + " " + "component";
        alert(componentname + " " + "component" + " " + "created successfully");
    }
    destroyComponent() {
        // destroy a component using the componentRef.
        this.componentRef.destroy();
        alert("component" + " " + "destroy successfully");
    }
}

destroyComponent() {
    // destroy a component using the componentRef.
    this.componentRef.destroy();
    alert("component destroy successfully");
}

<h3 class="title">Test Dynamic Component Create & Destroy</h3>
<button (click)="createComponent('home')">home component</button>
<button (click)="createComponent('account')">account component</button>
<button (click)="destroyComponent()">destroy component</button>
<ng-template #TextContainer></ng-template>

import { Component, Input } from '@angular/core';
@Component({
  selector: 'dynamicrestory',
  template: `<h2>{{dynamicrestory_msg}}</h2>`,
})
export class dynamicrestoryComponent  {
  @Input()
    dynamicrestory_msg!: string;
}