Angular：如何基于其他Signal Input设置Signal Input默认值且无需传undefined

你遇到的问题本质是Angular输入信号的transform钩子触发逻辑：只有当输入属性被显式绑定（哪怕绑定的是undefined）时，transform才会执行；如果完全不传递该输入属性，输入信号会直接使用初始值，不会走transform流程。

要实现“未传递value时自动使用min的当前值”的需求，更合适的方式是用computed信号来推导最终值，而不是依赖transform。

修改后的代码示例 #

import { Component, input, computed } from '@angular/core';

@Component({
  selector: 'my-input',
  standalone: true,
  template: `
    <input
      type="number"
      [min]="min()"
      [max]="max()"
      [value]="displayValue()"
    >
  `,
})
export class MyInput {
  min = input(0);
  max = input(100);
  // 保留原始value输入，不设置transform
  value = input<number | undefined>(undefined);

  // 用computed动态推导最终要展示的值
  displayValue = computed(() => this.value() ?? this.min());
}

为什么这样可行？ #

• computed信号会自动追踪依赖的value和min信号，只要其中任意一个变化，就会重新计算结果
• 当父组件未传递value时，value()返回初始的undefined，此时displayValue()会取min()的当前值
• 当父组件传递了value（包括显式传递undefined），或者min被修改时，displayValue都会自动更新

如果尝试用输入信号的defaultValue参数，是无法实现动态依赖min的，因为defaultValue只能是静态值，不能引用其他信号。

内容的提问来源于stack exchange，提问作者Paweł Chabros