欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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在浏览器中可以看到如下效果:

angular6 利用 ngContentOutlet 实现组件位置交换(重排)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。