angle4 / typescriptのdocument.getElementById置換？

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

角度でこれに代わるものがあるかどうか疑問に思っています

を使用してDOM要素にタグを付けてから、を使用して#someTag取得できます@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いくつかのテキストを印刷します。

DOCUMENTトークンをコンストラクターに挿入して、同じ関数を使用するだけです。

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

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

または、取得する要素がそのコンポーネントにある場合は、テンプレート参照を使用できます。

Angular 8または後方の@ViewChildには、 optsと呼ばれる追加のパラメーターがあります。これにはreadとstaticの2つのプロパティがあり、readはオプションです。あなたはそれを次のように使うことができます：

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

constructor() {
// ...

<div #mydiv></div>

注：静的：Angular 9ではfalseは不要になりました（{ static: true }ngOnInit内でその変数を使用する場合のみ）

これを試して：

TypeScriptファイルコード：

（<HTMLInputElement> document.getElementById（ "name"））。value

HTMLコード：

 <input id = "name" type = "text" #name /> 

  element: HTMLElement;

  constructor() {}

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