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; }}

执行命令npm start在浏览器中可以看到如下效果：