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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
前端构建工具之gulp的语法教程
Jun 12 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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
php之字符串变相相减的代码
2007/03/19 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
PHP内核探索:变量概述
2014/01/30 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
秋季运动会稿件
2014/01/30 职场文书
户外宣传策划方案
2014/05/25 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
学生上课说话检讨书
2014/10/25 职场文书
2014年双拥工作总结
2014/11/21 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书