angular6 利用 ngContentOutlet 实现组件位置交换(重排)
(编辑：jimmy 日期: 2024/11/6 浏览：3 次 )
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在浏览器中可以看到如下效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：vue单页面实现当前页面刷新或跳转时提示保存