document.getElementById pengganti di angular4 / typescript?

Jadi, saya bekerja dengan angular4 dalam pekerjaan praktik saya dan ini baru bagi saya. Untungnya, untuk mendapatkan elemen html dan nilainya saya menggunakan <HTMLInputElement> document.getElementByIdatau <HTMLSelectElement> document.getElementById

Saya bertanya-tanya apakah ada pengganti untuk ini di sudut

Anda dapat menandai elemen DOM Anda menggunakan #someTag, lalu mendapatkannya dengan @ViewChild('someTag').

Lihat contoh lengkapnya:

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.logakan mencetak Beberapa teks .

Anda cukup memasukkan token DOKUMEN ke dalam konstruktor dan menggunakan fungsi yang sama di dalamnya

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

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

Atau jika elemen yang ingin Anda dapatkan ada di dalam komponen itu, Anda bisa menggunakan referensi template .

Untuk Angular 8 atau posterior @ViewChild memiliki parameter tambahan yang disebut opts, yang memiliki dua properti: read dan static, read adalah opsional. Anda dapat menggunakannya seperti ini:

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

constructor() {
// ...

<div #mydiv></div>

CATATAN: Statis: false tidak diperlukan lagi di Angular 9. (hanya { static: true }ketika Anda akan menggunakan variabel itu di dalam ngOnInit)

  element: HTMLElement;

  constructor() {}

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

Coba ini:

Kode file TypeScript:

(<HTMLInputElement> document.getElementById ("name")). Nilai

Kode HTML:

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