angular6 利用 ngContentOutlet 实现组件位置交换

这篇文章主要介绍了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;
 }
}