web-dev-qa-db-ja.com

AngularコンポーネントでDOM操作を実行するには？

Angular（バージョン2.x以降）でDOM要素を取得するにはどうすればよいですか？addClass、removeClassなどの基本関数はTypeScriptでは使用できないため、これらのDOM操作を行うにはどうすればよいですか？ angular components？もしあれば提案してください。TIA

angulartypescriptangular2-componentsangular5
9
Vishal Gulati

この方法で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のようなサードパーティライブラリを自由に使用できます。

10
omeralper

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/ を参照してください

7
Günter Zöchbauer