在Angular中删除动态组件可以通过以下步骤实现:
import { Component, ComponentRef, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
componentRef: ComponentRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
createComponent() {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
this.componentRef = this.container.createComponent(componentFactory);
}
removeComponent() {
this.componentRef.destroy();
}
}
在父组件的模板中,使用ng-container
元素作为容器来动态创建组件,并使用@ViewChild
装饰器来获取这个容器的引用。
使用ComponentFactoryResolver
来解析动态组件的工厂,并使用createComponent
方法在容器中创建动态组件。
在removeComponent
方法中,调用destroy
方法来销毁动态组件。
请注意,以上代码中的DynamicComponent
是一个示例动态组件,你可以根据实际情况替换为自己的动态组件。
这样,当你点击"Remove Component"按钮时,动态组件将被从父组件中删除。