angular6 利用 ngContentOutlet 实现组件位置交换
2018-11-20 21:21
736 查看
这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
ngContentOutlet指令介绍
ngContentOutlet指令与ngTemplateOutlet指令类似,都用于动态组件,不同的是,前者传入的是一个Component,后者传入的是一个TemplateRef。
首先看一下使用:
其中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; } }阅读更多
相关文章推荐
- iPhone开发之UIScrollView滚动组件的使用(二) 拖线实现按钮控制大图移动利用contentOffset属性
- OpenCV—利用回调函数实现返回鼠标点击位置的坐标和灰度值
- UItableView 如何实现Cell之间交换位置
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
- iphone开发之UIButton按钮的使用(三)拖线实现 center和bounds实现控制组件的大小和位置
- 利用getBoundingClientRect方法实现简洁的sticky组件
- Android短信监听(二)——利用ContentObserver实现短信监听
- 利用proc 实现内核和用户态交换数据
- 利用RecyclerView实现的一个动画给变item的位置和左右滑动删除该RcyclervView的Item条目
- Java_利用多线程实现窗口组件背景图大小按比例变化
- JSP利用SmartUpload组件实现文件上传下载
- 原生js实现照片墙的效果(拖拽图片与另一张图片交换位置)
- JavaScript DOM 利用样式实现元素移动位置
- 利用cvKMeans2()实现图像聚类(位置+颜色)
- 利用node.js实现自动生成前端项目组件的方法详解
- C语言中利用位运算和指针实现的交换两个数的程序
- 利用腾讯位置服务API实现简单的网页地图显示
- 利用proc 实现内核和用户态交换数据
- 利用数组下标实现从任意位置开始得循环
- 利用Web ADF JavaScript Library实现GPS终端的实时位置显示(初级篇)