用 angular4/typecript 替换 document.getElementById？

在我的实践工作中，我和 Angular4一起工作，这对我来说是新的。

为了获得 HTML 元素及其值，我使用了 <HTMLInputElement> document.getElementById或 <HTMLSelectElement> document.getElementById。

我想知道有没有角度的替代品。

387217 次浏览
小开

您只需将 文件 令牌注入到构造函数中，并在构造函数中使用相同的函数即可

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


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

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

小开
最佳答案

您可以使用 #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将打印 一些短信。

小开 
  element: HTMLElement;


constructor() {}


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

对于 Angular 8或 after@ViewChild，有一个额外的参数 称为 opts，它有两个属性: read 和 static，read 是可选的。你可以这样使用它:

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


constructor() {
// ...

<div #mydiv></div>

注意: 静态: 在角度9中不再需要 false。(在 ngOnInit 中使用该变量时，仅使用 { static: true })

小开

试试这个:

文件代码:

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

HTML code: 

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

提交答案