在Angular中,可以通过以编程方式添加/删除组件来实现动态更新视图。以下是一个示例,其中通过单击按钮动态添加/删除相同的MyComponent组件的多个实例:
首先,我们需要定义MyComponent组件:
import { Component, Input } from '@angular/core';
@Component({ selector: 'app-my-component', template: '
接着,在包含按钮的父组件中,我们可以使用ComponentFactoryResolver和ViewContainerRef类来动态添加/删除MyComponent组件:
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; import { MyComponent } from './my-component.component';
@Component({
selector: 'app-parent-component',
template:
,
})
export class ParentComponent {
@ViewChild('myComponentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
addMyComponent() { // create a factory instance for MyComponent const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
// create a component instance
const componentRef = this.container.createComponent(componentFactory);
// set input value for the component
componentRef.instance.inputValue = 'some value';
// subscribe to component's destroy event and remove it from the container
componentRef.onDestroy(() => {
componentRef.destroy();
});
} }
这里,我们使用container.createComponent()方法创建一个MyComponent组件实例,并使用componentRef.instance来访问组件实例并设置其属性。我们还订阅了组件的销毁事件并将其从容器中删除。
最后,我们还可以在addMyComponent()方法中添加一个removeMyComponent()方法来动态删除相同组件的多个实例。
示例代码