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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
jquery 选择器部分整理
Oct 28 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
React组件生命周期详解
Jul 03 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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
Protoss兵种介绍
2020/03/14 星际争霸
php伪静态之APACHE篇
2014/06/02 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
javascript中的隐式调用
2018/02/10 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python实现ipsec开权限实例
2014/11/11 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python 的topk算法实例
2020/04/02 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
演讲稿格式范文
2014/05/19 职场文书
养成教育经验材料
2014/05/26 职场文书
揭牌仪式策划方案
2014/05/28 职场文书