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的live使用注意事项
Feb 18 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
js实现手机web图片左右滑动效果
Dec 29 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 生成随机验证码图片代码
2010/02/08 PHP
php 面向对象的一个例子
2011/04/12 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
使用Python发现隐藏的wifi
2020/03/04 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
学校实习推荐信
2015/03/27 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis