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 相关文章推荐
lib.utf.js
Aug 21 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
js实现打字小游戏
Dec 17 Javascript
谈谈node.js中的模块系统
Sep 01 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
javascript的内存管理详解
2013/08/07 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
图解Python变量与赋值
2018/04/03 Python
python实现Zabbix-API监控
2018/09/17 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
店长岗位职责
2013/11/21 职场文书
销售辞职报告范文
2014/01/12 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
银行员工考核评语
2014/12/31 职场文书
交通安全温馨提示语
2015/07/14 职场文书
餐馆开业致辞
2015/08/01 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
导游词之天津古文化街
2019/11/09 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers