详解Angular如何正确的操作DOM
无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢?
获取元素
1、ElementRef --- A wrapper around a native element inside of a View.
在组件的 constructor中注入ElementRef,可以获取到整个组件元素的包裹。
@Component({ selector: 'app-test-page', templateUrl: './test-page.ponent.html', styleUrls: ['./test-page.ponent.scss'] }) export class TestPageComponent implements OnInit { constructor( private el: ElementRef ) { } ngOnInit() { } getDomTest() { console.dir(this.el); } }
ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式,即可获取到指定的selector元素。
getDomTest() { console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素 }
2、@viewChild() --- You can use ViewChild to get the first element or the directive matching the selector from the view DOM.
@viewChild可以获取指定的元素, 指定的方式可以是本地变量或者组件类型;
// HTML <div class="tip-test-wrapper"> // 本地变量绑定button按钮 <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button> </div> // Dialog组件 <app-dialog></app-dialog> // ts import { DialogComponent } from './../../mon/ponents/dialog/dialog.ponent'; @Component({ selector: 'app-test-page', templateUrl: './test-page.ponent.html', styleUrls: ['./test-page.ponent.scss'] }) export class TestPageComponent implements OnInit { // 通过本地变量获取元素 可通过read来指定获取的元素类型 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef; @ViewChild('testdom') viewelement: ElementRef; // 通过组件类型来获取 @ViewChild(DialogComponent) viewcontent: DialogComponent; constructor( private el: ElementRef ) { } ngOnInit() { } getDomTest() { // console.dir(this.el.nativeElement.querySelector('.test-get-dom')); console.dir(this.viewcontainer); console.dir(this.viewelement); console.dir(this.viewcontent); } }
备注:ElementRef或者 @viewChild 获取元素,一定要在 ngAfterViewInit 周期之后再使用。
3、@viewChildren -- You can use ViewChildren to get the {@link QueryList} of elements or directives from theview DOM.
@viewChild会返回符合条件的第一个元素,如果需要获取多个符合条件的元素呢? @viewChildren会返回所有符合条件的元素的list。 指定selector的方式与@viewChild一致。
// 复制一个元素 <div class="tip-test-wrapper"> <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button> </div> <div class="tip-test-wrapper"> <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button> </div> </div> <app-dialog></app-dialog> <app-dialog></app-dialog> // ts import { DialogComponent } from './../../mon/ponents/dialog/dialog.ponent'; @Component({ selector: 'app-test-page', templateUrl: './test-page.ponent.html', styleUrls: ['./test-page.ponent.scss'] }) export class TestPageComponent implements OnInit { @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef; @ViewChild('testdom') viewelement: ElementRef; @ViewChildren('testdom') viewelements: QueryList<any>; @ViewChild(DialogComponent) viewcontent: DialogComponent; @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>; constructor( private el: ElementRef ) { } ngOnInit() { } getDomTest() { // console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // console.dir(this.viewcontainer); console.dir(this.viewelement); console.dir(this.viewelements); console.dir(this.viewcontent); console.dir(this.viewcontents); }
操作DOM --- Renderer2
在获取dom之后,如何对dom进行操作呢?原生的domAPI是一种选择,但是Angular提供了更好的跨平台方式 Renderer2。
引入 Renderer2 , 然后在construct中注入。
import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, Renderer2 , ViewChildren, QueryList} from '@angular/core'; import { DialogComponent } from './../../mon/ponents/dialog/dialog.ponent'; @Component({ selector: 'app-test-page', templateUrl: './test-page.ponent.html', styleUrls: ['./test-page.ponent.scss'] }) export class TestPageComponent implements OnInit { @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef; @ViewChild('testdom') viewelement: ElementRef; @ViewChildren('testdom') viewelements: QueryList<any>; @ViewChild(DialogComponent) viewcontent: DialogComponent; @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>; constructor( private render: Renderer2, private el: ElementRef ) { } ngOnInit() { } getDomTest() { // 修改元素颜色 this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red'); } }
renderer2提供了丰富的API供使用,如下:
总结
通过elementRef或者@viewChild @viewChildren获取元素,再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式,可以满足大部分的操作DOM的需求了。如果有特殊的场景,当然还是原生DOM撸起来呀
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程