angular4 / typescript 中的 document.getElementById 替换？答案

【问题标题】：document.getElementById replacement in angular4 / typescript?angular4 / typescript 中的 document.getElementById 替换？
【发布时间】：2018-06-21 22:50:35
【问题描述】：

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

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

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

【问题讨论】：

为什么不使用 getElementById？
只是想知道有一个角度的方式来获取元素。

标签： angular typescript

【解决方案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 将打印一些文本。

【讨论】：

出现错误错误：无法解析“@angular/core/src/metadata/di”错误：无法解析“@angular/core/src/linker/element_ref”
nvm，通过这样的导入解决。从 '@angular/core' 导入 { Component, OnInit,ViewChild,ElementRef };
如果你有 *ngFor、*ngIf 等条件 dom 元素，它将不起作用
Angular 8+ 需要 ViewChild 装饰器的两个参数。
@RavindraThorat 在 Angular 8+ 中，您可以提供 {static: false} 作为 ViewChild 装饰器的第二个参数，只要项目可见，您的引用就会指向它。

【解决方案2】：

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

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

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

或者如果你要获取的元素在那个组件中，你可以使用template references。

【讨论】：

为什么要注入文档对象而不是直接使用javascript提供的对象？
@Davide 我们依赖 Angular 的系统。稍后他们可以实现非常好的东西并检查他们的实现。所以我们这里只依赖抽象

【解决方案3】：

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

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

constructor() {
// ...

<div #mydiv></div>

注意：Angular 9 中不再需要静态：false。（当您要在 ngOnInit 中使用该变量时，只需 { static: true }）

【讨论】：

当您使用*ngIf 动态隐藏或显示元素时，它可以工作。你是如何创建元素的？
感谢您提供更新的语法。值得注意的是，您仍然不能在 Angular 8 中使用 @ViewChild('myDiv'... 的标签名称来抓取任何 HTML 元素。您只能在组件的标记中抓取带有模板变量标记的元素，例如。 G。 #mydiv。我几乎错过了您的答案包含元素上的变量标签。

【解决方案4】：

试试这个：

TypeScript 文件代码：

(document.getElementById("name")).value

HTML 代码：

【讨论】：

请用 getElementById("name") 描述您所指的 'name' 属性或值，因为它可能是 id 或 #name

【解决方案5】：

  element: HTMLElement;

  constructor() {}

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

【讨论】：

这是非常不安全的（在 Angular Universal 中运行此命令会导致崩溃），只有在没有其他选项的情况下才应该使用（还要考虑该元素可能不存在）
M@Joniras 为什么非常不安全？