angular4 / typescript'te document.getElementById değişimi?

Bu yüzden, pratik çalışmalarımda angular4 ile çalışıyorum ve bu benim için yeni. Şans eseri, html öğelerini ve değerlerini almak için kullandığım <HTMLInputElement> document.getElementByIdveya <HTMLSelectElement> document.getElementById

Bunun için açısal olarak herhangi bir alternatif olup olmadığını merak ediyorum

DOM öğenizi kullanarak etiketleyebilir #someTag, ardından ile alabilirsiniz @ViewChild('someTag').

Tam örneğe bakın:

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.logBir metin yazdıracak .

DOCUMENT belirtecini yapıcıya enjekte edebilir ve üzerinde aynı işlevleri kullanabilirsiniz.

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

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

Veya almak istediğiniz öğe bu bileşendeyse, şablon referanslarını kullanabilirsiniz .

Angular 8 veya posterior @ViewChild için opts adında iki özelliğe sahip ek bir parametre vardır : okuma ve statik, okuma isteğe bağlıdır. Bunu şu şekilde kullanabilirsiniz:

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

constructor() {
// ...

<div #mydiv></div>

NOT: Statik: false artık Angular 9'da gerekli değildir (yalnızca { static: true } da bu değişkeni ngOnInit içinde kullanacağınız zaman)

Bunu dene:

TypeScript dosya kodu:

(<HTMLInputElement> document.getElementById ("name")). Değer

HTML Kodu:

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

  element: HTMLElement;

  constructor() {}

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