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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JS实现div居中示例
2014/04/17 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
使用python分析git log日志示例
2014/02/27 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python实现把类当做字典来访问
2019/12/16 Python
Pytorch 实现权重初始化
2019/12/31 Python
keras中的backend.clip用法
2020/05/22 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
python中if嵌套命令实例讲解
2021/02/25 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
关键在于落实心得体会
2014/09/03 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP