目前的官方文档仅显示如何动态更改标记内的组件<ng-template>.https://angular.io/guide/dynamic-component-loader
我想实现的是,让我们说我有3个部分组成:header,section,并footer具有以下选择:
<app-header>
<app-section>
<app-footer>
再有6个按钮,这将增加或删除每个组件:Add Header,Add Section,和Add Footer
当我点击时Add Header,页面将添加<app-header>到呈现它的页面,因此页面将包含:
<app-header>
然后如果我点击Add Section两次,该页面现在将包含:
<app-header>
<app-section>
<app-section>
如果我点击Add Footer,页面将包含所有这些组件:
<app-header>
<app-section>
<app-section>
<app-footer>
是否有可能在Angular中实现这一目标？请注意,这ngFor不是我正在寻找的解决方案,因为它只允许向页面添加相同的组件,而不是不同的组件.
编辑:ngIf和ngFor不是我正在寻找的解决方案,因为模板已经预先确定.我正在寻找的东西就像一堆组件或一组组件,我们可以轻松地添加,删除和更改数组的任何索引.
编辑2:为了使它更清楚,让我们有另一个例子说明为什么ngFor不起作用.假设我们有以下组件:
<app-header>
<app-introduction>
<app-camera>
<app-editor>
<app-footer>
现在,这里有一个新组件,ngIf用户希望在其间插入ngFor.ngFor只有在我想要循环遍历的同一个组件时才有效.但是对于不同的组件,ngFor在这里失败了.