document.getElementById是否在angular4/typescript中替换？

我正在和angular4一起练习，这对我来说是新的

为了获取HTML元素及其值，我使用了

document.getElementById

或

document.getElementById

我想知道angular中是否有任何替代方法。

您只需将令牌注入构造函数并在其上使用相同的函数即可

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

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

---

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

您可以使用

#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);
    }
}

从'@angular/core'导入{AfterViewInit，Component，ElementRef，ViewChild}；
@组成部分({
选择器：“应用程序”，
模板：`
一些文本
`,
})
导出类AppComponent实现AfterViewInit{
@ViewChild（'myDiv'）myDiv:ElementRef；
ngAfterViewInit（）{
log（this.myDiv.nativeElement.innerHTML）；
}
}

---

console.log

将打印一些文本。

对于Angular 8或Poster@ViewChild，有一个名为opts的附加参数，它有两个属性：读取和静态，读取是可选的。您可以这样使用它：

从'@angular/core'导入{ElementRef，ViewChild}；
// ...
@ViewChild（'mydiv'，{static:false}）公共mydiv:ElementRef；
构造函数（）{
// ...

注意：Angular 9中不再需要Static:false。（在ngOnInit中使用该变量时，只需

{Static:true}

）

尝试以下操作：

类型脚本文件代码：

(<HTMLInputElement>document.getElementById("name")).value （document.getElementById（“name”））.value HTML代码：

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

---

为什么不使用getElementById？只是想知道是否有一种角度的方式来获取元素。错误显示错误：无法解析“@angular/core/src/metadata/di”错误：无法解析“@angular/core/src/linker/element_ref”nvm，通过如下导入解决。导入{Component，OnInit，ViewChild，ElementRef}在“@angular/core”中，如果您有像*ngFor这样的条件dom元素，*ngIf etcAngular 8+需要两个参数到ViewChild装饰器，那么它将不起作用。只有在条件为true时，我才能添加#myDiv？例如：使用id，我可以做[id]=“isValid？”myDiv:“”。感谢这是非常不安全的（在angular Universal中运行此命令会导致崩溃）只有在没有其他选择的情况下才可以使用（也考虑到元素可能不存在）M@Joniras为什么它非常不安全？当您使用

*ngIf

动态隐藏或显示元素时，它会起作用。您是如何创建元素的？为什么我应该注入document对象而不是直接使用javascript提供的对象？@Davide我们依赖Angular系统。之后他们可以实现非常好的功能并在其imp中进行一些检查元素。因此，我们仅依赖于此处的抽象。请描述您使用getElementById（“name”）引用的“name”属性或值，因为它可以是id或#nameNice！这个花絮可以。。。。 <input id="name" type="text" #name />