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

Question

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

Answer 1

The basic functions like addClass, removeClass etc are not availble in typescript

它们可用。在 JS 中可以完成的所有事情都可以在 TypeScript 中完成。您也可以使用 jQuery，但不鼓励将其与 Angular2

一起使用

关于如何获取元素引用的一些解释

话虽如此，在 Angular2 中，您应该避免强制修改 DOM，而是使用结构指令绑定，如 *ngFor、*ngIf、...，绑定如 [class.class-name']="true" 或 ngClass.

等指令

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

Answer 2

您可以使用 ViewChild 装饰器以这种方式访问 DOM 元素：

@Component({
    ....
    templateUrl: 'mytemplate.html'
})

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

}

并且在您的模板中 class 您必须指定选择器是谁

<div #selector> </div>

或者您可以使用 ElementRef class

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
   }
}

您可以自由使用第 3 方库，例如 Jquery 用于 typescript 中的 addClass、removeClass。

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

How to perform DOM manipulation in Angular components?

typescript

angular2-components

angular

angular5