document.getElementById vervanging in hoekig4 / typoscript?

Ik werk met angular4 in mijn praktijkwerk, en dit is nieuw voor mij.

Om HTML-elementen en hun waarden te krijgen, heb ik <HTMLInputElement> document.getElementByIdof <HTMLSelectElement> document.getElementById.

Ik vraag me af of er een vervanging hiervoor is in hoekig.

Antwoord 1, autoriteit 100%

Je kunt je DOM-element taggen met #someTagen het vervolgens ophalen met @ViewChild('someTag').

Zie volledig voorbeeld:

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.logzal Wat tekstafdrukken.

Antwoord 2, autoriteit 50%

Je kunt het token DOCUMENTgewoon in de constructor injecteren en gebruik er dezelfde functies op

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 
@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

of als het element dat u wilt krijgen in dat onderdeel, kunt u sjabloonreferenties .

Antwoord 3, Autoriteit 17%

voor Angular 8 of posterior @viewChild hebben een extra parameter genaamd Offts, die twee eigenschappen hebben: lees en statisch, lezen is optioneel. U kunt het zo gebruiken:

import { ElementRef, ViewChild } from '@angular/core';
// ...
@ViewChild('mydiv', { static: false }) public mydiv: ElementRef;
constructor() {
// ...

<div #mydiv></div>

OPMERKING: STATIC: FALSE is niet meer nodig in Angular 9. (Just { static: true }Wanneer u die variabele binnen NGONINIT gebruikt)

Antwoord 4, Autoriteit 5%

Probeer dit:

Typescript-bestandscode:

(& lt; htmlllintelement & gt; document.getelementByID ("naam")). Waarde 

HTML-code:

& LT; INPUT ID = "NAAM" Type = "Tekst" #Name / GT; 

Antwoord 5, Autoriteit 5%

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