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 相关文章推荐
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript实现密码验证
Nov 10 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
php语法检查的方法总结
2019/01/21 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JQuery球队选择实例
2015/05/18 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
纯javascript版日历控件
2016/11/24 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python实现发送邮件功能代码
2017/12/14 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
走进敬老院活动总结
2014/07/10 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
文艺演出主持词
2015/07/01 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP