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 Ajax之load()方法
Oct 12 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python实现识别手写数字大纲
2018/01/29 Python
django中模板的html自动转意方法
2018/05/27 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python构造函数init实例方法解析
2020/01/19 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
用Python开发app后端有优势吗
2020/06/29 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
廉政教育心得体会
2014/01/01 职场文书
五一手机促销方案
2014/03/08 职场文书
安全生产责任书
2014/03/12 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
走近毛泽东观后感
2015/06/04 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python