Angular组件能否实现条件依赖型输入参数限制？

需求明确 #

允许以下两种组件使用方式：

• <elevensies [drink]="tea" [milk]="yes" />
• <elevensies [drink]="water" />

禁止以下参数组合：

• <elevensies [drink]="water" [milk]="yes" />（当drink为water时，传入milk需触发错误提示）

当前组件TS代码：

@Component({
  selector: "elevensies",
  ...
})
export class ElevensiesComponent {
  readonly drink= input.required<"tea"|"water">();
  readonly milk = input<"yes"|"no">();
}

实现方案 #

可以从运行时校验和编译时校验两个层面实现需求，兼顾运行时错误拦截和开发阶段的即时提示。

1. 运行时校验（基础实现） #

利用Angular的effect监听输入变化，当检测到非法参数组合时抛出错误：

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

@Component({
  selector: "elevensies",
  template: `<!-- 组件模板 -->`
})
export class ElevensiesComponent {
  readonly drink = input.required<"tea"|"water">();
  readonly milk = input<"yes"|"no">();

  constructor() {
    effect(() => {
      const currentDrink = this.drink();
      const currentMilk = this.milk();
      
      if (currentDrink === 'water' && currentMilk !== undefined) {
        throw new Error(`elevensies组件错误：当drink取值为"water"时，不允许传入milk参数`);
      }
    });
  }
}

这种方式会在浏览器控制台抛出清晰的错误信息，阻止非法参数组合的生效。

2. 编译时校验（优化用户体验） #

通过TypeScript条件类型约束输入参数的合法组合，结合Angular严格模板检查，在开发阶段（IDE中）就提示非法用法：

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

// 定义合法的输入组合类型
type ValidInputs<T extends "tea" | "water"> = 
  T extends "tea" 
    ? { drink: T; milk?: "yes" | "no" } 
    : { drink: T; milk?: never };

@Component({
  selector: "elevensies",
  template: `<!-- 组件模板 -->`
})
export class ElevensiesComponent<T extends "tea" | "water"> {
  readonly drink = input.required<T>();
  // 让milk的类型依赖于drink的取值
  readonly milk = input<ValidInputs<T>["milk"]>();

  // 保留运行时校验作为兜底
  constructor() {
    effect(() => {
      const currentDrink = this.drink();
      const currentMilk = this.milk();
      
      if (currentDrink === 'water' && currentMilk !== undefined) {
        throw new Error(`elevensies组件错误：当drink取值为"water"时，不允许传入milk参数`);
      }
    });
  }
}

开启Angular的strictTemplates配置后，IDE会在用户输入非法参数组合时直接标红提示，无需等到运行时才发现问题。

说明 #

• 两种方案结合使用可以最大化提升组件易用性：编译时提示提前规避错误，运行时校验兜底拦截非法输入。
• 无需合并输入参数为单个对象，完全满足独立输入参数的场景需求。

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