Angular(バージョン2.x以降)でDOM要素を取得するにはどうすればよいですか?addClass、removeClassなどの基本関数はTypeScriptでは使用できないため、これらのDOM操作を行うにはどうすればよいですか? angular components?もしあれば提案してください。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
}
}
TypeScript内でaddClass、removeClassにJqueryのようなサードパーティライブラリを自由に使用できます。
AddClass、removeClassなどの基本的な関数は、TypeScriptでは使用できません
彼らは利用可能です。 JSでできることはすべて、TypeScriptでできます。 Angular2での使用は推奨されていませんが、jQuery
を使用することもできます
要素への参照を取得する方法の説明 angular 2/TypeScript:テンプレート内の要素を取得する
そうは言っても、Angular2では、DOMを命令的に変更することは避け、代わりに、*ngFor
、*ngIf
、...などの構造ディレクティブ、[class.class-name']="true"
などのバインディング、またはngClass
。
詳細については、 https://angular.io/docs/ts/latest/guide/ を参照してください