angular6 利用 ngContentOutlet 实现组件

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