angular6 利用 ngContentOutlet 实现组件位置交换(重排
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排),长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
ngContentOutlet指令介绍
ngContentOutlet指令与ngTemplateOutlet指令类似,都用于动态组件,不同的是,前者传入的是一个Component,后者传入的是一个TemplateRef。
首先看一下使用:
<ng-container *ngComponentOutlet="MyComponent"></ng-container>
其中MyComponent是我们自定义的组件,该指令会自动创建组件工厂,并在ng-container中创建视图。
实现组件位置交换
angular中视图是和数据绑定的,它并不推荐我们直接操作HTML DOM元素,而且推荐我们通过操作数据的方式来改变组件视图。
首先定义两个组件:
button.ponent.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-button', template: `<button>按钮</button>`, styleUrls: ['./button.ponent.css'] }) export class ButtonComponent implements OnInit { constructor() { } ngOnInit() { } }
text.ponent.ts
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-text', template: ` <label for="">{{textName}}</label> <input type="text"> `, styleUrls: ['./text.ponent.css'] }) export class TextComponent implements OnInit { @Input() public textName = 'null'; constructor() { } ngOnInit() { } }
我们在狼蚁网站SEO优化的代码中,动态创建以上两个组件,并实现位置交换功能。
动态创建组件,并实现位置交换
我们先创建一个数组,用于存放上文创建的两个组件ButtonComponent和TextComponent,位置交换时,只需要调换组件在数组中的位置即可,代码如下:
import { TextComponent } from './text/text.ponent'; import { ButtonComponent } from './button/button.ponent'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <ng-container *ngFor="let item of ponentArr" > <ng-container *ngComponentOutlet="item"></ng-container> </ng-container> <br> <button (click)="swap()">swap</button> `, styleUrls: ['./app.ponent.css'] }) export class AppComponent { public ponentArr = [TextComponent, ButtonComponent]; constructor() { } public swap() { const temp = this.ponentArr[0]; this.ponentArr[0] = this.ponentArr[1]; this.ponentArr[1] = temp; } }
执行命令npm start在浏览器中可以看到如下效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程