如何在Angular组件中执行DOM操作?

前端之家收集整理的这篇文章主要介绍了如何在Angular组件中执行DOM操作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们如何在Angular(版本2.x及更高版本)中获取DOM元素? addClass,removeClass等基本函数在typescript中是不可用的,那么我们如何在角度组件中进行这些DOM操作呢?请建议是否有. TIA
您可以通过以下方式使用ViewChild装饰器来访问DOM元素:
@Component({
    ....
    templateUrl: 'mytemplate.html'
})

export class MyComponent{
  @ViewChild('selector') private someName;
  constructor() {
     //this is your dom
     //this.someName.nativeElement
  }

}

在你的模板类中,你必须指定谁是那个选择器

<div #selector> </div>

或者您可以使用ElementRef类

import {Component,AfterViewInit,ElementRef} from "@angular/core";

export class MyComponent  implements  AfterViewInit {

  constructor(protected elementRef: ElementRef) {

  }

  ngAfterViewInit() {
       //you can reach your dom element by using
       //this.elementRef.nativeElement
   }
}

你可以自由地使用像Jquery这样的第三方库来获取addClass,在typescript中使用removeClass.

原文链接:https://www.f2er.com/angularjs/143538.html

猜你在找的Angularjs相关文章