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

ngContentOutlet指令介绍

ngContentOutlet指令与ngttemplateoutlet指令类似，都用于动态组件，不同的是，前者传入的是一个组件，后者传入的是一个TemplateRef。

首先看一下使用：

ng-容器* ng组件出口='我的组件'/ng-容器其中我的组件是我们自定义的组件，该指令会自动创建组件工厂，并在ng-容器中创建视图。

实现组件位置交换

有角的中视图是和数据绑定的，它并不推荐我们直接操作文档对象模型元素，而且推荐我们通过操作数据的方式来改变组件视图。

首先定义两个组件：

button.component.ts

从“@棱角分明/核心”导入{组件，在初始化时}；@ Component({选择器： ' app-button '，模板： ' button按钮/button `, style URL 3360[' ./button.component.css']})导出类按钮组件实现在init { constructor(){ } ngOnInit(){ } }文本上。组件。分时（同timesharing）

从“@棱角分明/核心”导入{组件，OnInit，Input }；@ Component({选择器： ' app-text '，模板： '标签为=' ' { { text name } }/label输入类型='text ' `，style URL 3360[')./text.component.css']})导出类文本组件实现OnInit { @Input()公共text name=' null constructor(){ } ngOnInit(){ } }我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。

动态创建组件，并实现位置交换

我们先创建一个数组，用于存放上文创建的两个组件按钮组件和TextComponent，位置交换时，只需要调换组件在数组中的位置即可，代码如下：

从""导入{文本组件} ./text/text组件'；从""导入{按钮组件} ./按钮/按钮。组件'；从“@棱角分明/核心”导入{组件}；@ Component({选择器： ' app-root '，模板： ' ng-container * ngFOr='让组件的项arr ' ng-container * ng组件出口=' item '/ng-container/ng-container br按钮(单击)=' swap()' swap/button `, style URL 3360[]./app.component.css']})导出类AppComponent { public component arr=[text component，button component]；constructor(){ } public swap(){ const temp=this。component arr[0]；这个。componentarr[0]=这个。component arr[1]；这个。component arr[1]=temp；}}执行命令新公共管理启动在浏览器中可以看到如下效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。