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 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
Vue运用transition实现过渡动画
May 06 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
一个MYSQL操作类
2006/11/16 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
详解Django中间件执行顺序
2018/07/16 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
浅谈Python中的继承
2020/06/19 Python
暑期实习鉴定
2013/12/16 职场文书
环保公益广告语
2014/03/13 职场文书
教师对学生的寄语
2014/04/03 职场文书
食品流通安全承诺书
2014/05/22 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
考博导师推荐信范文
2015/03/27 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Nginx HTTP跳转至HTTPS
2022/05/15 Servers