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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
JavaScript 指导方针
2007/04/05 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
gearman的安装启动及python API使用实例
2014/07/08 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
培训讲师邀请函
2014/01/10 职场文书
战略合作意向书范本
2014/04/01 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
感动中国何玥观后感
2015/06/02 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
区域销售大会开幕词
2016/03/04 职场文书