angular4 / typescript 中的 document.getElementById 替换？

Question

我在实践工作中使用 angular4，这对我来说是新的。

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

我想知道是否有任何角度的替代品。

原文由 Nino Gutierrez 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 将打印 _一些文本_。

原文由 Alexandre Annic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试这个：

TypeScript 文件代码：

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

HTML 代码：

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

原文由 Swati 发布，翻译遵循 CC BY-SA 4.0 许可协议