document.getElementById-Ersatz in angle4 / typescript?

Also arbeite ich mit angular4 in meiner Übungsarbeit und das ist neu für mich. Zum Glück habe ich <HTMLInputElement> document.getElementByIdoder verwendet, um HTML-Elemente und ihre Werte zu erhalten <HTMLSelectElement> document.getElementById

Ich frage mich, ob es einen Ersatz dafür in Winkel gibt

Sie können Ihr DOM-Element mit markieren #someTagund dann mit abrufen @ViewChild('someTag').

Siehe vollständiges Beispiel:

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.logdruckt Text .

Sie können einfach das DOCUMENT- Token in den Konstruktor einfügen und dieselben Funktionen darauf verwenden

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

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

Wenn sich das gewünschte Element in dieser Komponente befindet, können Sie Vorlagenreferenzen verwenden .

Für Angular 8 oder posterior @ViewChild gibt es einen zusätzlichen Parameter namens opts, der zwei Eigenschaften hat: read und static, read ist optional. Sie können es so verwenden:

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

constructor() {
// ...

<div #mydiv></div>

HINWEIS: Statisch: false ist in Angular 9 nicht mehr erforderlich (nur { static: true } wenn Sie diese Variable in ngOnInit verwenden möchten).

  element: HTMLElement;

  constructor() {}

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

Versuche dies:

TypeScript-Dateicode:

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

HTML Quelltext:

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