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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
AngularJS实现表单验证
Jan 28 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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
星际争霸秘籍
2020/03/04 星际争霸
MySQL修改密码方法总结
2008/03/25 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
动态表格Table类的实现
2009/08/26 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python引用模块和查找模块路径
2016/03/17 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
商务考察邀请函范文
2014/01/21 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Linux中sftp常用命令整理
2022/06/28 Servers