Angular2 - <input> 引用组件中的模板引用变量以更改值属性



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

我想知道是否有一种方法可以做到这一点,而不需要双向绑定到全局变量,因为我认为尽可能少的全局变量更干净。谢谢

Angular对此的解决方案是将输入模型双向绑定到组件中的变量。这不会涉及到清理全局作用域,特别是,如果您按照Typescript的文档用let声明var。

我想知道是否有一种方法可以做到这一点,而不需要双向绑定到全局变量,因为我认为尽可能少的全局变量更干净。谢谢

我理解这一点,但调用ElementRef可能是两败俱伤。Angular文档非常不鼓励使用它,因为Angular已经在处理DOM API方面做了很多工作。

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

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

我强烈建议您查看Angular的FormBuilder,以构建模型驱动的表单,而不是模板驱动的表单。这是一种非常优雅的方法,可以用程序控制页面上的表单值,而不是在模板上。Scotch.io有一篇很棒的博客文章,非常值得学习。

祝你好运!

相关内容

  • 没有找到相关文章

最新更新