Angular 2个动态创建组件的位置

Question

我通过单击按钮通过组件工厂添加多个下拉菜单。每次我添加一个新的下拉列表时，它都会出现在前一个下拉列表的顶部，这是一个问题，因为我需要它在下面。有没有办法设置新组件相对于其他同类型组件的位置？

@ViewChild('additionalDropdown', { read: ViewContainerRef })
private additionalDropdown: any;

...

let componentFactory = this.resolver.resolveComponentFactory(MultiselectComponent);
let componentRef = this.additionalDropdown.createComponent(componentFactory, 0,  this.additionalDropdown.injector)

模板：

<ng-container #additionalDropdown></ng-container>

Answer 1

插入的组件的位置是createComponent()的第二个参数。

你正在做 createComponent(componentFactory, 0) 所以你总是插入组件 作为容器中的第一个视图 （零 = 第一个位置）。

如果您没有为第二个参数传递任何值，该组件将作为最后一个视图插入，但您不能这样做，因为您要传递 3 个参数。

您可以尝试将 null 作为第二个参数传递，但我不确定它是否有效：

this.additionalDropdown.createComponent(componentFactory, null, this.additionalDropdown.injector);

或者你可以有一个手动计数器（这肯定有效）：

const counter = 0;
this.additionalDropdown.createComponent(componentFactory, counter++, this.additionalDropdown.injector);