Thay thế document.getElementById trong angle4 / stylescript?

Vì vậy, tôi đang làm việc với angle4 trong công việc thực hành của mình và đây là điều mới mẻ đối với tôi. Thật may mắn, để có được các phần tử html và các giá trị của nó, tôi đã sử dụng <HTMLInputElement> document.getElementByIdhoặc <HTMLSelectElement> document.getElementById

Tôi tự hỏi nếu có bất kỳ sự thay thế nào cho điều này trong góc cạnh

Bạn có thể gắn thẻ phần tử DOM của mình bằng cách sử dụng #someTag, sau đó lấy nó bằng @ViewChild('someTag').

Xem ví dụ đầy đủ:

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.logsẽ in Một số văn bản .

Bạn chỉ có thể đưa mã thông báo DOCUMENT vào hàm tạo và sử dụng các chức năng tương tự trên đó

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

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

Hoặc nếu phần tử bạn muốn lấy nằm trong thành phần đó, bạn có thể sử dụng tham chiếu mẫu .

Đối với Angular 8 hoặc sau @ViewChild có một tham số bổ sung được gọi là opts, có hai thuộc tính: đọc và tĩnh, đọc là tùy chọn. Bạn có thể sử dụng nó như vậy:

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

constructor() {
// ...

<div #mydiv></div>

LƯU Ý: Static: false không còn được yêu cầu trong Angular 9. (chỉ { static: true }khi bạn định sử dụng biến đó bên trong ngOnInit)

  element: HTMLElement;

  constructor() {}

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

Thử đi:

Mã tệp TypeScript:

(<HTMLInputElement> document.getElementById ("name")). Giá trị

Mã HTML:

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