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

Question

我们如何在 Angular（2.x 及更高版本）中获取 DOM 元素？typescript 中没有 addClass、removeClass 等基本功能，那么我们如何在 Angular 组件中进行这些 DOM 操作呢？如果有请建议。TIA

Answer 1

您可以通过以下方式使用 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
   }
}

您可以在 typescript 中自由使用 Jquery 等 3th 方库的 addClass、removeClass。

Answer 2

typescript 中没有 addClass、removeClass 等基本功能

它们是可用的。可以在 JS 中完成的所有事情都可以在 TypeScript 中完成。您也可以jQuery在不鼓励与 Angular2 一起使用时使用

一些解释如何获取对元素 angular 2 / typescript 的引用：获取模板中的元素

话虽如此，在 Angular2 中，您应该避免强制修改 DOM，而是使用与结构指令（如*ngFor, *ngIf, ..., binding like[class.class-name']="true"或指令 like的绑定）进行绑定ngClass。

有关更多详细信息，请参阅https://angular.io/docs/ts/latest/guide/