Angular 5 : interchange locations of dynamic components

Question

我想交换 View 内动态放置的组件的位置。

即如图所示，我使用 id = 1 和 2 动态创建了组件。

现在我需要交换两个组件的位置，但是如何交换呢？

我知道的一件事(仅理论上)是位置可以通过 ViewContainerRef 类 中的 move 方法通过对象更改为 viewContainerRef.move(componentRef.hostView, index) .

我试过了，但位置没有互换。

@ViewChild(ContainerRefDirective) location: ContainerRefDirective;

let componentFactory = this.factoryResolver.resolveComponentFactory(EntryComponent);
let componentRef = this.location.viewContainerRef.createComponent(componentFactory);

let entryComponent: EntryComponent = componentRef.instance;
// lets say counter is variable that increments its value on new component creation.
entryComponent.Id = ++counter; 

// move method is being called right after a new component is created and placed. 
//this piece of code is in the same method (that is creating the dynamic components)
this.location.viewContainerRef.move(componentRef.hostView, 1);

我已阅读 angular.io 上的 ViewContainerRef 文档并阅读了关于此问题的几乎相同的问题，但无法理解或解决此问题。

Answer 1

为什么不将两个动态组件绑定(bind)到一个数组？例如，如果您有一个“objectA”和“objectB”:

this.renderArray.push(objectA);
..
this.renderArray.push(objectB);

你的 html 看起来像这样:

<ng-container *ngFor="let renderObject of renderArray">
   <<you can reference objectA and objectB by using "renderObject.value" etc.>>
</ng-container>

当你需要交换它们的位置时，你只需要操作数组，angular 会处理剩下的事情:

this.renderArray = this.renderArray.reverse();

它将以新的顺序重新渲染 ngFor 容器。参见 working example here .