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

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

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

@Component({
 selector: 'app-button',
 template: `<button>按钮</button>`,
 styleUrls: ['./button.ponent.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.ponent.css']
})
export class TextComponent implements OnInit {
 @Input() public textName = 'null';
 constructor() { }

 ngOnInit() {
 }

}

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

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