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实现倒计时按钮具体方法
Nov 14 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
深入理解js数组的sort排序
May 28 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
简短大学毕业感言
2014/01/18 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
个人催款函范文
2015/06/24 职场文书