AngularコンポーネントでDOM操作を実行するにはどうすればよいですか？

Question

Angular（バージョン2.x以上）でDOM要素を取得するにはどうすればよいですか？ addClass、removeClassなどの基本的な関数はtypescriptでは使用できませんので、これらのDOM操作をどのように角度コンポーネントで行うのでしょうか？もしあればお勧めします。 TIA

Answer 1

addClass、removeClassなどのような基本的な機能は

彼らが用意されていtypescriptです

でavailbleではありません。 JSでできることはすべてTypeScriptで行うことができます。 Angular2

どのように命令的にDOMを変更しないが、代わりにバインディングを使用する必要がありAngular2で、言われて、その要素 angular 2/typescript : get hold of an element in the template

への参照を取得するためにいくつかの説明で使用されるように落胆している間、あなたはまた、jQueryを使用することができます*ngFor,*ngIf、...のような構造的指示が[class.class-name']="true"のように、または指示がngClassのように。

詳細は、あなたがこのようにViewChildデコレータを使用して、DOM要素に到達することができますhttps://angular.io/docs/ts/latest/guide/

Answer 2

を参照してください：

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

addClassではJquery、typescriptではremoveClassなどの第三者のライブラリを自由に使用できます。