【问题标题】：Get element by id - Angular2通过 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 的绑定教程... 那里有很多例子

标签： javascript angular typescript

【解决方案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";
      }



   }

【讨论】：