这篇文章主要介绍了关于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.component.html', styleUrls: ['./test-page.component.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// tsimport { DialogComponent } from './../../common/components/dialog/dialog.component';@Component({ selector: 'app-test-page', templateUrl: './test-page.component.html', styleUrls: ['./test-page.component.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一致。
// 复制一个元素
// tsimport { DialogComponent } from './../../common/components/dialog/dialog.component';@Component({ selector: 'app-test-page', templateUrl: './test-page.component.html', styleUrls: ['./test-page.component.scss']})export class TestPageComponent implements OnInit { @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef; @ViewChild('testdom') viewelement: ElementRef; @ViewChildren('testdom') viewelements: QueryList;
登录后复制
@ViewChild(DialogComponent) viewcontent: DialogComponent; @ViewChildren(DialogComponent) viewcontents: QueryList; 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, , ViewChildren, QueryList} from '@angular/core';import { DialogComponent } from './../../common/components/dialog/dialog.component';@Component({ selector: 'app-test-page', templateUrl: './test-page.component.html', styleUrls: ['./test-page.component.scss']})export class TestPageComponent implements OnInit { @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef; @ViewChild('testdom') viewelement: ElementRef; @ViewChildren('testdom') viewelements: QueryList; @ViewChild(DialogComponent) viewcontent: DialogComponent; @ViewChildren(DialogComponent) viewcontents: QueryList; constructor( private el: ElementRef ) { } ngOnInit() { } getDomTest() { }｝
登录后复制
renderer2提供了丰富的API供使用，如下：
总结
通过elementRef或者@viewChild @viewChildren获取元素，再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式，可以满足大部分的操作DOM的需求了。如果有特殊的场景，当然还是原生DOM撸起来呀
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
原生JS和jQuery分别使用jsonp来获取“当前天气信息”
JavaScript Error对象的解析
以上就是Angular如何正确的操作DOM的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747056.html
