angular6使用ngContentOutlet实现组件位置交换的方法

小编给大家分享一下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;
 }
}

看完了这篇文章，相信你对angular6使用ngContentOutlet实现组件位置交换的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

网站名称：angular6使用ngContentOutlet实现组件位置交换的方法
当前地址：https://www.cdcxhl.com/article18/ppesdp.html

成都网站建设公司_创新互联，为您提供App开发、用户体验、定制开发、Google、品牌网站建设、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联