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


Posted in Javascript onNovember 02, 2018

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 实现组件位置交换(重排)

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

Javascript 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
js数据类型检测总结
Aug 05 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 #Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 #Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 #Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 #Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
You might like
JS的数组的扩展实例代码
2008/07/09 Javascript
javascript 写类方式之四
2009/07/05 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python基于PycURL实现POST的方法
2015/07/25 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python实现画圆功能
2018/01/25 Python
Python中常见的异常总结
2018/02/20 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
教师节活动主持词
2014/04/02 职场文书
小学班级口号
2014/06/09 职场文书
党委班子对照检查材料
2014/08/19 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
小浪底导游词
2015/02/12 职场文书
学校推普周活动总结
2015/05/07 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL