angular4 / typescript中的document.getElementById替换？

Question

所以，我在练习中使用angular4，这对我来说是新的。 幸运的是，为了获取html元素及其值，我使用了<HTMLInputElement> document.getElementById或<HTMLSelectElement> document.getElementById

我想知道是否有角度更换

Answer 1

您可以使用#someTag标记DOM元素，然后使用@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将打印一些文本 。

Answer 2

您可以将DOCUMENT标记注入构造函数并在其上使用相同的函数

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

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

或者，如果要获取的元素位于该组件中，则可以使用模板引用 。

Answer 3

  element: HTMLElement;

  constructor() {}

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

Answer 4

对于Angular 8或后面的@ViewChild有一个名为opts 的附加参数 ，它有两个属性：read和static，read是可选的。 您可以像这样使用它：

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

注意这是针对Angular 8或后部的。