动态添加和删除角度组件

您可以尝试实现以下目标：通过使用动态创建组件

ComponentFactoryResolver

ViewContainerRef

请参见下面的示例：

import {  Component,  ComponentFactoryResolver, Type,  ViewChild,  ViewContainerRef} from '@angular/core';// Example component (can be any component e.g. app-header app-section)import { DraggableComponent } from './components/draggable/draggable.component';@Component({  selector: 'app-root',  template: `    <!-- Pass the component class as an argument to add and remove based on the component class -->    <button (click)="addComponent(draggableComponentClass)">Add</button>    <button (click)="removeComponent(draggableComponentClass)">Remove</button>    <div>      <!-- Use ng-template to ensure that the generated components end up in the right place -->      <ng-template #container>      </ng-template>    </div>  `})export class AppComponent {  @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;  // Keep track of list of generated components for removal purposes  components = [];  // Expose class so that it can be used in the template  draggableComponentClass = DraggableComponent;  constructor(private componentFactoryResolver: ComponentFactoryResolver) {  }  addComponent(componentClass: Type<any>) {    // Create component dynamically inside the ng-template    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);    const component = this.container.createComponent(componentFactory);    // Push the component so that we can keep track of which components are created    this.components.push(component);  }  removeComponent(componentClass: Type<any>) {    // Find the component    const component = this.components.find((component) => component.instance instanceof componentClass);    const componentIndex = this.components.indexOf(component);    if (componentIndex !== -1) {      // Remove component from both view and array      this.container.remove(this.container.indexOf(component));      this.components.splice(componentIndex, 1);    }  }}

笔记：

1. 如果您希望以后更轻松地删除这些组件，可以在局部变量中跟踪它们，请参见

   this.components

   。或者，您可以遍历内的所有元素

   ViewContainerRef

   。

2. 您必须将组件注册为输入组件。在模块定义中，将组件注册为entryComponent（

   entryComponents: [DraggableComponent]

   ）。