本篇文章给大家带来的内容是关于angular6如何使用ngcontentoutlet实现组件位置交换（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
ngcontentoutlet指令介绍
ngcontentoutlet指令与ngtemplateoutlet指令类似，都用于动态组件，不同的是，前者传入的是一个component，后者传入的是一个templateref。
首先看一下使用：
其中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; }}
以上就是angular6如何使用ngcontentoutlet实现组件位置交换（代码示例）的详细内容。