Angular 5交换（重排）动态组件的位置

如果忽略了angular的组件是由数据控制的特性，很容易陷入使用dom操作控制组件。最简单的方式是使用数组存放数据，通过重排数组中的元素的位置，从而达到重排组件的效果。

示例：

app.ts

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngFor="let item of array">
       <div>
         item: {{item}}
       </div>
    </ng-container>
    <button (click)="reverse()">交互组件</button>
  `,
})
export class App {
  array = [];
  constructor() {
    this.renderArray.push("组件A")
    this.renderArray.push("组件B")
  }
  reverse(){
    this.renderArray = this.array.reverse();
  }
}
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}