angular4 / typescript의 document.getElementById 대체?

그래서 저는 연습 작업에서 angular4로 작업하고 있는데 이것은 저에게 새로운 것입니다. 운 좋게도 html 요소와 내가 사용한 값을 얻으려면 <HTMLInputElement> document.getElementById또는 <HTMLSelectElement> document.getElementById

각도에 이것에 대한 대체가 있는지 궁금합니다.

을 사용하여 DOM 요소에 태그를 지정한 #someTag다음 @ViewChild('someTag').

전체 예보기 :

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.log일부 텍스트 를 인쇄 합니다 .

DOCUMENT 토큰을 생성자에 주입 하고 동일한 기능을 사용할 수 있습니다.

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

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

또는 가져 오려는 요소가 해당 구성 요소에있는 경우 템플릿 참조를 사용할 수 있습니다 .

Angular 8 또는 사후 @ViewChild의 경우 읽기 및 정적이라는 두 가지 속성이있는 opts라는 추가 매개 변수가 있으며 읽기는 선택 사항입니다. 다음과 같이 사용할 수 있습니다.

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

constructor() {
// ...

<div #mydiv></div>

참고 : 정적 : Angular 9에서는 더 이상 false가 필요하지 않습니다 ( { static: true }ngOnInit 내에서 해당 변수를 사용하려는 경우).

  element: HTMLElement;

  constructor() {}

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

이 시도:

TypeScript 파일 코드 :

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

HTML 코드 :

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