Dokument.getElementById zastąpiono w angular4 / maszynopisie?

Tak więc pracuję z angular4 w mojej praktyce i to jest dla mnie nowość. Na szczęście aby pobrać elementy html i jego wartości użyłem <HTMLInputElement> document.getElementByIdlub <HTMLSelectElement> document.getElementById

Zastanawiam się, czy jest jakiś zamiennik tego w kątowym

Możesz otagować swój element DOM za pomocą #someTag, a następnie pobrać go za pomocą @ViewChild('someTag').

Zobacz pełny przykład:

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.logwydrukuje jakiś tekst .

Możesz po prostu wstrzyknąć token DOCUMENT do konstruktora i użyć na nim tych samych funkcji

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

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

Lub jeśli element, który chcesz pobrać, znajduje się w tym komponencie, możesz użyć odniesień do szablonów .

Dla Angular 8 lub posterior @ViewChild mają dodatkowy parametr o nazwie opts, który ma dwie właściwości: read i static, read jest opcjonalne. Możesz go używać w ten sposób:

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

constructor() {
// ...

<div #mydiv></div>

UWAGA: Static: false nie jest już wymagane w Angular 9. (tylko { static: true }wtedy, gdy zamierzasz użyć tej zmiennej wewnątrz ngOnInit)

  element: HTMLElement;

  constructor() {}

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

Spróbuj tego:

Kod pliku TypeScript:

(<HTMLInputElement> document.getElementById ("nazwa")). Wartość

Kod HTML:

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