在angular4 /打字稿中替换document.getElementById？

90

因此，我在我的练习工作中与angular4一起工作，这对我来说是新的。幸运的是，为了获得html元素及其使用的值，我 <HTMLInputElement> document.getElementById还是 <HTMLSelectElement> document.getElementById

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

angular typescript

— 尼诺·古铁雷斯（Nino Gutierrez）
source

2

为什么不使用getElementById？

— Suren Srapyan

1

为什么要这样做？

— 莱奥R.

只是想知道是否有一种角度获取元素的方法。

— Nino Gutierrez

138

您可以使用标记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）
source

错误显示了错误：无法解析“@角/核心/ src目录/元/ DI”错误：无法解析“@角/核心/ src目录/连接/ element_ref”

— 尼诺·古铁雷斯

2

nvm，通过这样导入解决。从'@ angular / core'导入{Component，OnInit，ViewChild，ElementRef};

— 尼诺·古铁雷斯

17

如果您有条件dom元素（例如* ngFor，* ngIf等），它将无法正常工作

— Ravindra Thorat 18-10-22

Angular 8+要求ViewChild装饰器有两个参数。

如果条件为真，如何添加#myDiv？例如：使用id我可以执行[id] =“ isValid？'myDiv'：''。谢谢

— daniel8x

78

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

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

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

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

— 苏伦·斯拉皮扬（Suren Srapyan）
source

24

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

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

constructor() {
// ...

<div #mydiv></div>

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

— 古斯塔沃·圣玛丽亚
source

1

当您使用来动态隐藏或显示元素时，它会起作用*ngIf。您如何创建元素？

— 古斯塔沃·圣玛丽亚

7

  element: HTMLElement;

  constructor() {}

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

— 塞萨尔·德维萨
source

2

这是非常不安全的（在Angular Universal中运行此命令会导致崩溃），并且仅在没有其他可能的选择时才使用（还应考虑该元素可能不存在）

— Joniras

2

M @ Joniras为什么非常不安全？

— Sumi Straessle，

6

试试这个：

TypeScript文件代码：

（<HTMLInputElement> document.getElementById（“ name”））。value

HTML代码：

 <input id =“ name” type =“ text” #name />

— 斯瓦蒂
source