angular6 利用 ngContentOutlet 实现组件位置交换(重排)

<ng-container *ngComponentOutlet=\"MyComponent\"></ng-container>

import { Component, OnInit } from \'@angular/core\';

@Component({
 selector: \'app-button\',
 template: `<button>按钮</button>`,
 styleUrls: [\'./button.component.css\']
})
export class ButtonComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }

}

import { Component, OnInit, Input } from \'@angular/core\';

@Component({
 selector: \'app-text\',
 template: `
 <label for=\"\">{{textName}}</label>
 <input type=\"text\">
 `,
 styleUrls: [\'./text.component.css\']
})
export class TextComponent implements OnInit {
 @Input() public textName = \'null\';
 constructor() { }

 ngOnInit() {
 }

}

import { TextComponent } from \'./text/text.component\';
import { ButtonComponent } from \'./button/button.component\';
import { Component } from \'@angular/core\';

@Component({
 selector: \'app-root\',
 template: `
 <ng-container *ngFor=\"let item of componentArr\" >
  <ng-container *ngComponentOutlet=\"item\"></ng-container>
 </ng-container>
 <br>
 <button (click)=\"swap()\">swap</button>
`,
 styleUrls: [\'./app.component.css\']
})
export class AppComponent {
 public componentArr = [TextComponent, ButtonComponent];
 constructor() {
 }
 public swap() {
  const temp = this.componentArr[0];
  this.componentArr[0] = this.componentArr[1];
  this.componentArr[1] = temp;
 }
}