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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JS错误处理与调试操作实例分析
Apr 13 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
python处理csv数据的方法
2015/03/11 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
基于python实现微信模板消息
2015/12/21 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python 内置模块详解
2019/01/01 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
行政管理毕业生自荐信
2014/02/24 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
sql注入报错之注入原理实例解析
2022/06/10 MySQL