12

Angular (バージョン 2.x 以降) で DOM 要素を取得するにはどうすればよいですか? addClass、removeClass などの基本的な関数は typescript では使用できないため、Angular コンポーネントでこれらの DOM 操作を行うにはどうすればよいでしょうか? あれば提案してください。ティア

4

2 に答える 2

11

次のように 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
   }
}

タイプスクリプト内のaddClass、removeClassには、Jqueryのようなサードパーティのライブラリを自由に使用できます。

于 2016-11-07T12:24:58.793 に答える
7

addClass、removeClass などの基本的な関数は typescript では利用できません

それらは利用可能です。JS でできることはすべて TypeScript でもできます。jQueryAngular2での使用が推奨されていないときにも使用できます

angular 2 / typescript要素への参照を取得する方法の説明 ：テンプレート内の要素を取得します

そうは言っても、Angular2 では DOM を強制的に変更することは避け、代わりに*ngFor、*ngIf、 ... などの構造ディレクティブ、バインディング 、[class.class-name']="true"または などのディレクティブを使用してバインディングを使用する必要がありngClassます。

詳細については、https://angular.io/docs/ts/latest/guide/を参照してください。

于 2016-11-07T12:11:27.120 に答える