Angular点击修改@Input绑定输入值 无额外变量实现方案咨询

方案1：通用递增函数+双向数据流（推荐，符合Angular最佳实践） #

因为你的输入值是通过@Input从外部传入的，遵循Angular单向数据流规范，我们可以通过@Output回传修改后的值，由外部维护源数据，当前组件完全不需要额外存储中间变量：

组件TS代码 #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-number-input',
  templateUrl: './number-input.component.html'
})
export class NumberInputComponent {
  // 外部传入的原始值
  @Input() value: number = 0;
  // 回传修改后的值的事件
  @Output() valueChange = new EventEmitter<number>();

  /**
   * 通用递增函数
   * @param step 自定义递增步长，默认1
   */
  increment(step: number = 1) {
    this.valueChange.emit(this.value + step);
  }
}

组件模板代码 #

<input [value]="value">
<span (click)="increment(5)">+</span> <!-- 这里传入自定义步长即可 -->

外部父组件调用 #

直接用双向绑定，不需要修改当前组件的任何逻辑，多个输入框直接复用同一个组件即可：

<app-number-input [(value)]="parentVal1"></app-number-input>
<app-number-input [(value)]="parentVal2" [step]="10"></app-number-input>
<app-number-input [(value)]="parentVal3" [step]="2"></app-number-input>

方案2：封装为独立指令（更适合跨组件复用场景） #

如果需要在不同组件的输入框都复用增量逻辑，可以把逻辑封装为属性指令，不需要在业务组件里写任何处理代码：

指令代码 #

import { Directive, Input, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[numIncrement]',
  standalone: true // Angular 14+支持standalone直接引入使用，低版本去掉该属性后加到对应模块的declarations中即可
})
export class NumIncrementDirective {
  // 绑定当前输入值
  @Input() numIncrement: number = 0;
  // 自定义步长
  @Input() step: number = 1;
  // 回传修改后的值
  @Output() numIncrementChange = new EventEmitter<number>();

  @HostListener('click')
  handleClick() {
    this.numIncrementChange.emit(this.numIncrement + this.step);
  }
}

任意组件模板内使用 #

<!-- 第一个输入框，步长为1 -->
<input [value]="val1">
<span [numIncrement]="val1" (numIncrementChange)="val1 = $event">+</span>

<!-- 第二个输入框，步长为5 -->
<input [value]="val2">
<span [numIncrement]="val2" (numIncrementChange)="val2 = $event" [step]="5">+</span>

<!-- 第三个输入框，步长为10 -->
<input [value]="val3">
<span [numIncrement]="val3" (numIncrementChange)="val3 = $event" [step]="10">+</span>

这种方式完全不需要为每个输入框单独声明变量或写处理逻辑，直接套指令即可实现复用。

临时方案（不推荐，仅做参考） #

如果不想改动数据流，也可以直接操作DOM实现，不需要额外变量：

increment(inputEl: HTMLInputElement, step: number) {
  const current = Number(inputEl.value) || 0;
  inputEl.value = String(current + step);
}

模板里给输入框加模板引用变量即可调用：

<input #input1 [value]="myInput.something">
<span (click)="increment(input1, 3)">+</span>

该方案直接操作DOM，不符合Angular数据流规范，仅适合临时调试用。

内容的提问来源于stack exchange，提问作者Luca