web-dev-qa-db-ja.com

Angular4 / typescriptのdocument.getElementById置換？

だから、私の練習作業でangular4を使って作業しているのですが、これは私にとって新しいことです。幸いなことに、html要素とその値を取得するために<HTMLInputElement> document.getElementByIdまたは<HTMLSelectElement> document.getElementByIdを使用しました

角度でこれに代わるものがあるかどうか疑問に思う

angulartypescript
42
Nino Gutierrez

#someTagを使用してDOM要素にタグを付け、@ViewChild('someTag')で取得できます。

完全な例を参照してください。

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.logは一部のテキストを出力します。

69
Alexandre Annic

DOCUMENT トークンをコンストラクタに挿入し、同じ関数を使用することができます

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

または、取得したい要素がそのコンポーネント内にある場合、 template references を使用できます。

39
Suren Srapyan
  element: HTMLElement;

  constructor() {}

  fakeClick(){
    this.element = document.getElementById('ButtonX') as HTMLElement;
    this.element.click();
  }
6
Cesar Devesa

Angular 8以降の@ViewChildには追加のパラメーターがあります optsと呼ばれ、読み取りと静的の2つのプロパティがあり、読み取りはオプションです。次のように使用できます。

@ViewChild('mydiv', { static: false }) mydiv: ElementRef;

これはAngular 8以降の場合に注意してください。

3
Gustavo Santamaría