Angular 17.2：控制流中Signal输入的条件渲染正确处理方法

方案1：自定义类型守卫函数 #

在组件类里定义一个类型守卫函数，明确判断值是否为number类型：

isNumber(value: unknown): value is number {
  return typeof value === 'number';
}

在模板中使用这个守卫配合as语法，就能直接得到正确的number类型变量，无需非空断言：

@if (isNumber(index()); as validIndex) {
  <div appMyComponent [index]="validIndex"></div>
}

方案2：派生Signal过滤空值 #

在组件内创建一个派生Signal，自动过滤null和undefined：

validIndex = computed(() => {
  const idx = this.index();
  return typeof idx === 'number' ? idx : null;
});

模板里直接判断这个派生Signal，进入分支后变量会被自动推断为number类型：

@if (validIndex(); as idx) {
  <div appMyComponent [index]="idx"></div>
}

方案3：手动类型断言（不推荐） #

如果不想额外编写逻辑，也可以在as之后手动添加类型断言，不过这种方式安全性依赖手动判断，可读性较差：

@if (index() !== null && index() !== undefined; as idx) {
  <div appMyComponent [index]="idx as number"></div>
}

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