这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ngContentOutlet指令介绍
ngContentOutlet指令与ngTemplateOutlet指令类似，都用于动态组件，不同的是，前者传入的是一个Component，后者传入的是一个TemplateRef。
首先看一下使用：
`<``ng-container` `*``ngComponentOutlet``=``"MyComponent"``></``ng-container``>`
其中MyComponent是我们自定义的组件，该指令会自动创建组件工厂，并在ng-container中创建视图。
实现组件位置交换
angular中视图是和数据绑定的，它并不推荐我们直接操作HTML DOM元素，而且推荐我们通过操作数据的方式来改变组件视图。
首先定义两个组件：
button.component.ts
`import { Component, OnInit } from` `'@angular/core'``;`
`@Component({`
`selector:` `'app-button'``,`
`template: `<button>按钮</button>`,`
`styleUrls: [``'./button.component.css'``]`
`})`
`export class ButtonComponent implements OnInit {`
`constructor() { }`
`ngOnInit() {`
`}`
`}`
text.component.ts
`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() {`
`}`
`}`
我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。
动态创建组件，并实现位置交换
我们先创建一个数组，用于存放上文创建的两个组件ButtonComponent和TextComponent，位置交换时，只需要调换组件在数组中的位置即可，代码如下：
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;}}`
