时间戳

首页 > 解决方案 > 单击时角度更改输入值

javascript - 单击时角度更改输入值

问题描述

我有一个输入，该输入的值作为来自另一个组件的输入：

    <input [value]="myInput.something">
    <span (click)="incrementPlus()">+</span>

我需要一个简单的函数，可以根据我的选择增加每次点击时的输入值。这是一件非常简单的事情，除了输入值传递给我：
@Input() myInput: number;
而且我不必创建一个变量来保存值，因为我必须在许多其他输入上重复/重用它。我再说一遍：这通常很简单，因为我可以将 @ 输入传递给函数，对其进行修改，将其保存在变量中，然后将变量传递给 html 输入值。但是我必须在其他 html 输入上重用它，并且编写大量变量对我来说似乎不是一个好习惯。

这不像我之前见过的所有其他问题，因为它们都静态地改变一个值，或者将它包装在一个变量中，我不想这样做。

标签： javascriptangulartypescriptinputincrement

解决方案

如果您也想更改父组件中的值，则需要使用 @Output 和双向绑定。当您输入更改时，您将调用输出 EventEmitter 的发出来通知父级该值已更改。

对于双向绑定，输出必须像您的输入一样命名，加上Change.

在孩子身上，你把：

@Input() something: number;
@Output() somethingChange = new EventEmitter<number>();

在父母中：

[(something)]="theValue"

然后，当您somethingChange.emit获得一些价值时，它会更改父母的价值，并将其传递给您的孩子。

这是一个完整的例子： https ://stackblitz.com/edit/angular-en58l5?file=src%2Fapp%2Fhello.component.ts

推荐阅读