这篇文章重要引见了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;
 }
}