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 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
javascript制作2048游戏
Mar 30 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
php empty() 检查一个变量是否为空
2011/11/10 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
在django view中给form传入参数的例子
2019/07/19 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
大学生旷课检讨书
2014/01/22 职场文书
大学军训感言1500字
2014/03/09 职场文书
团队激励口号
2014/06/06 职场文书
应届生自荐信
2014/06/30 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
云台山导游词
2015/02/03 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL