本文主要介绍angular6如何使用ngContentOutlet实现组件位置交换（重排）。小编觉得挺好的。现在分享给大家，给大家一个参考。和小编一起来看看吧。ngContentOutlet指令介绍ngContentOutlet指令类似于ngTemplateOutlet指令，用于动态组件。不同的是前者传入一个Component，后者传入一个TemplateRef。先看使用：其中MyComponent是我们的自定义组件，这个指令会自动创建一个组件工厂，并在ng-container中创建一个视图。实现组件位置交换Angular中的视图是绑定数据的，不建议我们直接操作HTMLDOM元素，建议我们通过操作数据来改变组件视图。首先定义两个组件：button.component.tsimport{Component,OnInit}from'@angular/core';@Component({selector:'app-button',template:``,styleUrls:['./button.component.css']})exportclassButtonComponentimplementsOnInit{constructor(){}ngOnInit(){text.component.tsimport{Component,OnInit,Input}from'@angular/core';@Component({选择器:'app-text',模板:`{{textName}}}`,styleUrls:['./text.component.css']})导出类TextComponent实现OnInit{@Input()publictextName='null';constructor(){}ngOnInit(){}}在下面的代码中，我们动态创建了以上两个组件，并实现了位置交换功能。动态创建组件，实现位置互换我们首先创建一个数组来存放上面创建的两个组件ButtonComponent和TextComponent。交换位置时，??只需要交换组件在数组中的位置即可。代码如下：import{TextComponent}from'./text/text.component';import{ButtonComponent}from'./button/button.component';import{Component}from'@angular/core';@Component({选择器:'app-root',模板:`
swap`,styleUrls:['./app.component.css']})exportclassAppComponent{publiccomponentArr=[TextComponent,ButtonComponent];constructor(){}publicswap(){consttemp=this.componentArr[0];this.componentArr[0]=this.componentArr[1];this.componentArr[1]=temp;}}
