Question

如何在Angular2中访问组件中元素的value属性？

在模板中：

<input #myInput (keyup.enter)="onInput(myInput)"/>

在组件代码中：

import {ElementRef} from '@angular/core';
...
onInput(latLngInputElement: ElementRef) {
  // I want to access the value property of the <input> element here, and
  // modify it so that it is reflected back in the template.

我知道我可以将myInput.value传递给代码，但我需要引用，以便我也可以使用该函数来更新元素的.value属性。

我想知道是否有一种方法可以做到这一点，不涉及双向绑定到全局变量，因为我认为尽可能少的全局变量更清晰。谢谢！

Answer 1

Angular对此的解决方案是将输入模型双向绑定到组件中的变量。如果你根据Typescript的文档声明var let，那么这不会弄脏全局范围，特别是。

我想知道是否有办法做到这一点，不涉及双向绑定到全局变量，因为我认为尽可能少的全局变量更清晰。谢谢！

我理解这一点，但调用ElementRef可能是两个恶魔中更糟糕的。 Angular文档非常不鼓励使用它，因为Angular已经为处理DOM API做了很多工作。

但是，应该能够从latLngInputElement.value获取值。

如果您正在寻找更清洁的解决方案：

我强烈建议您查看Angular的FormBuilder以构建模型驱动的表单，而不是模板驱动的表单。这是一种非常优雅的方式来以编程方式而不是模板方式控制页面上的表单值。 Scotch.io有一个excellent blog post。这非常值得学习。

祝你好运！

angular2 - 组件中的reference <input />模板引用变量，用于更改value属性

1 个答案: