angular6 利用 ngContentOutlet 实现组件位置交换(重排)
程序员文章站
2023-10-28 20:35:40
ngcontentoutlet指令介绍
ngcontentoutlet指令与ngtemplateoutlet指令类似,都用于动态组件,不同的是,前者传入的是一个com...
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在浏览器中可以看到如下效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。