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

Question

如何在Angular (Version 2)中获取DOM元素?X及以上)?addClass, removeClass等基本功能在typescript中是不可用的，所以我们如何在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 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
   }
}

你可以自由地使用第三方库，如Jquery的addClass, removeClass在typescript。

Answer 2

addClass, removeClass等基本函数在typescript中是不可用的

它们是可用的。可以在JS中完成的一切都可以在TypeScript中完成。你也可以使用jQuery，但不鼓励与Angular2一起使用

关于如何获取元素引用的说明Angular 2/typescript:获取模板中的元素

也就是说，在Angular2中，你应该避免强制修改DOM，而是使用结构指令的绑定，比如*ngFor, *ngIf，…，如[class.class-name']="true"或ngClass指令的绑定。

详细信息请参见https://angular.io/docs/ts/latest/guide/