angular4/typescript中的document.getElementById替换？

Question

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

我想知道是否有角度更换

Answer 1

您可以使用标记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将打印一些文字.

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

尝试这个：

打字稿文件代码：

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

HTML代码：

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

Answer 4

  element: HTMLElement;

  constructor() {}

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

Answer 5

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

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

请注意，这适用于Angular 8或后角。