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功能函数(2009-06-04更新)
Jun 04 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
Yii框架form表单用法实例
2014/12/04 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python机器学习之神经网络(二)
2017/12/20 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
从0开始的Python学习016异常
2019/04/08 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
新领导上任欢迎词
2014/01/13 职场文书
房地产开发项目建议书
2014/05/16 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
如何理解PHP核心特性命名空间
2021/05/28 PHP
python异常中else的实例用法
2021/06/15 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫