目前的官方文档仅显示如何动态更改< ng-template>中的组件.标签.
https://angular.io/guide/dynamic-component-loader
我想要实现的是,假设我有3个组件：标题,节和页脚,带有以下选择器：
<app-header> <app-section> <app-footer>
然后有6个按钮可以添加或删除每个组件：添加标题,添加节和添加页脚
当我点击添加标题时,该页面将添加< app-header>到呈现它的页面,所以页面将包含：
<app-header>
然后如果我单击Add Section两次,该页面现在将包含：
<app-header> <app-section> <app-section>
<app-header> <app-section> <app-section> <app-footer>
是否有可能在Angular中实现这一目标？请注意,ngFor不是我正在寻找的解决方案,因为它只允许向页面添加相同的组件,而不是不同的组件.
编辑：ngIf和ngFor不是我正在寻找的解决方案,因为模板已经预先确定.我正在寻找的东西就像是一堆组件或一组组件,我们可以轻松地添加,删除和更改数组的任何索引.
编辑2：为了使它更清楚,让我们有另一个例子说明为什么ngFor不起作用.假设我们有以下组件：
<app-header> <app-introduction> <app-camera> <app-editor> <app-footer>
现在,这里有一个新组件< app-description>,用户希望在其中插入< app-editor>. ngFor只有在我想要循环遍历的同一个组件时才有效.但是对于不同的组件,ngFor在这里失败了.
解决方法
您可以通过使用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);
}
}
}
笔记：
>如果您希望以后更容易删除组件,可以在局部变量中跟踪它们,请参阅this.components.或者,您可以遍历ViewContainerRef中的所有元素.
>您必须将组件注册为条目组件.在模块定义中,将组件注册为entryComponent(entryComponents：[DraggableComponent]).
