angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018-11-02 11:16
537 查看
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 实现组件位置交换
- iPhone开发之UIScrollView滚动组件的使用(二) 拖线实现按钮控制大图移动利用contentOffset属性
- 利用commons-fileupload组件实现文件上传-实例
- 利用Jakarta commons fileupload组件实现多文件上传
- C_利用函数的引用调用实现两数的交换
- 利用开源的TaskScheduler组件实现监控和管理windows计划任务
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- Android使用RecycleView实现拖拽交换item位置
- 利用WhiteHose一步步建立分布式系统的框架(七)--添加组件的操作并实现分布式系统
- 在vue-cli3.0中利用webpack实现自动化注册组件
- JavaScript DOM 利用样式实现元素移动位置
- 利用TitleWindow和VideoPlayer组件轻松实现视频弹出播放效果
- java 利用Jframe实现查找鼠标点击的位置坐标
- 利用滑杆实现对Flex可视化组件的缩放
- 利用http组件实现多引擎搜索功能
- 利用AngularJS中ng-include实现静态HTML头文件和尾文件导入
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- Android短信监听(二)——利用ContentObserver实现短信监听
- 利用Jakarta commons fileupload组件实现多文件上传(原理)