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

发布时间：2020-12-17 07:55:06 所属栏目：安全来源：网络整理

导读：我们如何在Angular(版本2.x及更高版本)中获取DOM元素？ addClass,removeClass等基本函数在typescript中是不可用的,那么我们如何在角度组件中进行这些DOM操作呢？请建议是否有. TIA 您可以通过以下方式使用ViewChild装饰器来访问DOM元素： @Component({ ....

我们如何在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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!