通过 id 获取元素 - Angular2

Posted 2023-03-13

【中文标题】通过 id 获取元素 - Angular2

【英文标题】：Get element by id - Angular2

【发布时间】：2017-05-26 02:54:48

【问题描述】：

我有一个代码：

document.getElementById('loginInput').value = '123';

但是在编译代码时我收到以下错误：

类型 htmlElement 上不存在属性值。

我已经声明了一个变量：value: string;。

如何避免此错误？

谢谢。

【问题讨论】：

似乎你确实想要一个 id 的组件，而不是 id 的元素。但这不受支持。

提供更多代码

@GünterZöchbauer 那么我怎样才能捕捉到这个元素呢？ <input type='text' id='loginInput'/>?

如果你使用 Angular 2，你可以使用它的数据绑定功能here

别那样做，只要按照 angular.io 的绑定教程... 那里有很多例子

【参考方案1】：

如果您想设置值，则可以在单击或某些事件触发时的某些功能中执行相同的操作。

您也可以使用ViewChild 使用像这样的局部变量来获取价值

<input type='text' id='loginInput' #abc/>

并获得这样的价值

this.abc.nativeElement.value

here is working example

更新

好的，你必须使用angualr2的ngAfterViewInit方法来做同样的事情

ngAfterViewInit()
    document.getElementById('loginInput').value = '123344565';
  

ngAfterViewInit 不会抛出任何错误，因为它会在模板加载后呈现

【讨论】：

有趣。在 Angular 6 中是这样吗？

是的。 Angular 6 也是如此。

这是 Angular 中的首选方式吗？它也适用于 Angular 7，但我不确定这是否是 Angular 的方法。

显然不是@skydev，但根据问题要求我回答了这个

【参考方案2】：

(<HTMLInputElement>document.getElementById('loginInput')).value = '123';

Angular 不能直接获取 HTML 元素，因此您需要通过将上述泛型绑定到它来指定元素类型。

更新::

这也可以使用带有 #localvariable 的 ViewChild 来完成，如此处所示，如 here 中所述

<textarea  #someVar  id="tasknote"
                  name="tasknote"
                  [(ngModel)]="taskNote"
                  placeholder=" notePlaceholder "
                  style="background-color: pink"
                  (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false">  todo.note  

</textarea>

---

import ElementRef,Renderer2 from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer2) 

ngAfterViewInit() 
      console.log(this.rd); 
      this.el.nativeElement.focus();      //<<<=====same as oldest way

---

【参考方案3】：

另一种方法，即：您可以使用“Angular 方式”并使用ngModel 并完全跳过document.getElementById('loginInput').value = '123';。而是：

<input type="text" [(ngModel)]="username"/>
<input type="text" [(ngModel)]="password"/>

并在您的组件中给出这些值：

username: 'whatever'
password: 'whatever'

这将在导航到页面时预设用户名和密码。

【讨论】：

如果我必须将值从外部 javascript 文件传递​​到角度组件表单字段怎么办？这就是我所做的，当算法完成生成值时，我有一个算法位于 javascript 文件中，并使用此代码 getDocumentById('input').value = someValue; 传递回角度形式。 .但是，当我尝试在 OnSubmit() 事件中检索值时，我得到了未定义的值。有什么想法吗？

【参考方案4】：

Complate Angular Way (Set/Get value by Id):

//在Html标签中

 <button (click) ="setValue()">Set Value</button>
 <input type="text"  #userNameId />

//在组件.ts文件中

    export class testUserClass 
       @ViewChild('userNameId') userNameId: ElementRef;

      ngAfterViewInit()
         console.log(this.userNameId.nativeElement.value );
       

      setValue()
        this.userNameId.nativeElement.value = "Sample user Name";