Angular 单击更改输入值

Question

我有一个输入，其值是从另一个组件接收的输入值：

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

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

这不像我以前看到的所有其他问题，因为它们都是静态更改值，或将其包装在变量中，我不想这样做。

Answer 1

如果您也想更改 parent 组件中的值，您将需要使用 @Output 和 two-way-binding。当您输入更改时，您将调用输出 EventEmitter 的 emit 以通知 parent 值已更改。

对于 two-way-binding，输出必须像您的输入一样命名，加上 Change。

在 child 中，您输入：

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

并且在 parent 中：

[(something)]="theValue"

然后当您 somethingChange.emit 一些值时，它会更改 parent 的值，并将它也传递给您的 child。

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

Angular 单击更改输入值

Angular change input value on click

javascript

angular

typescript

input

increment