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 相关文章推荐
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
js实现点击生成随机div
Jan 16 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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数据 实现代码
2009/06/15 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
浅谈js原生拖放
2016/11/21 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
js中作用域的实例解析
2017/03/16 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python for i in range ()用法详解
2020/09/18 Python
python中加背景音乐如何操作
2020/07/19 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
网络工程师的自我评价
2013/10/02 职场文书
写给女生的道歉信
2014/01/14 职场文书
销售业务员岗位职责
2014/01/29 职场文书
小学生成长感言
2014/01/30 职场文书
校庆活动方案
2014/03/31 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
合作协议书
2014/04/23 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
优秀员工推荐信
2014/05/10 职场文书
销售类求职信
2014/06/13 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书