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)，因此您始终在容器中插入组件作为FIRST视图（零=第一个位置）。

如果没有为第二个参数传递任何值，则该组件将作为最后一个视图插入，但由于您要传递3个参数，因此无法执行此操作。

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

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

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

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