การแทนที่ document.getElementById ใน angular4 / typescript?

ดังนั้นฉันกำลังทำงานกับ 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 มีพารามิเตอร์เพิ่มเติมที่เรียกว่าตัวเลือกซึ่งมีคุณสมบัติสองอย่าง: อ่านและแบบคงที่อ่านเป็นทางเลือก คุณสามารถใช้มันดังนี้:

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

constructor() {
// ...

<div #mydiv></div>

หมายเหตุ: Static: false ไม่จำเป็นอีกต่อไปใน Angular 9 (เฉพาะ{ static: true }เมื่อคุณจะใช้ตัวแปรนั้นภายใน ngOnInit)

ลองสิ่งนี้:

รหัสไฟล์ TypeScript:

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

รหัส HTML:

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

  element: HTMLElement;

  constructor() {}

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