欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Angular如何正确的操作DOM

程序员文章站 2022-03-14 23:42:05
...
这篇文章主要介绍了关于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);
  }
}

Angular如何正确的操作DOM

  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
<p class="tip-test-wrapper">
   
    <button class="test-get-dom"  (click)="getDomTest()">测试获取DOM</button>
 </p>
  <app-dialog></app-dialog>


// ts
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 {
  // 通过本地变量获取元素  可通过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);
  }
}

Angular如何正确的操作DOM

  备注: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一致。

// 复制一个元素
  <p class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </p>
  <p class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </p>
</p>
<app-dialog></app-dialog>
<app-dialog></app-dialog>// 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<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);
  }

Angular如何正确的操作DOM

操作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<any>;
  @ViewChild(DialogComponent) viewcontent: DialogComponent;
  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {

    
  }
}

  renderer2提供了丰富的API供使用,如下:

Angular如何正确的操作DOM

总结

  通过elementRef或者@viewChild @viewChildren获取元素,再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式,可以满足大部分的操作DOM的需求了。如果有特殊的场景,当然还是原生DOM撸起来呀

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

原生JS和jQuery分别使用jsonp来获取“当前天气信息”

JavaScript Error对象的解析

以上就是Angular如何正确的操作DOM的详细内容,更多请关注其它相关文章!

相关标签: Angular