2

如何在 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 属性。

我想知道是否有一种方法可以做到这一点，它不涉及两种方式绑定到全局变量，因为我认为拥有尽可能少的全局变量会更干净。谢谢！

4

1 回答 1

2

Angular 对此的解决方案是将输入模型双向绑定到组件中的变量。这不会涉及弄脏全局范围，特别是如果您根据 Typescript 的文档使用 a 声明varlet。

我想知道是否有一种方法可以做到这一点，它不涉及两种方式绑定到全局变量，因为我认为拥有尽可能少的全局变量会更干净。谢谢！

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

但是，您应该能够从latLngInputElement.value.

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

我强烈建议查看 AngularFormBuilder以构建模型驱动的表单，而不是模板驱动的表单。这是一种非常优雅的方式来以编程方式而不是在模板上控制页面上的表单值。Scotch.io 上有一篇很棒的博客文章。非常值得学习。

祝你好运！

于 2017-02-06T19:19:30.893 回答