如何在Angular模板中对Signal进行类型收窄？

在Angular模板中直接调用Signal（如item()）时，每次调用都会获取最新值，TypeScript无法关联不同调用的结果，导致@if判断后无法自动收窄类型。解决这个问题的核心是将Signal的取值结果缓存到模板变量中，让TypeScript能跟踪同一个值的类型。

方法1：使用Angular 17+的@let语法（推荐） #

@let可以在模板中直接声明变量，无需额外嵌套元素，是最简洁的方案：

@let currentItem = item();
@if (Array.isArray(currentItem)) {
  <!-- currentItem 已被正确收窄为数组类型 -->
  {{ currentItem.length }}
} @else {
  <!-- currentItem 已被正确收窄为非数组类型 -->
  {{ currentItem }}
}

方法2：使用*ngIf的as语法（兼容Angular 16及以下） #

如果项目未升级到Angular 17，可以用*ngIf的变量绑定语法，通过嵌套元素实现类型收窄：

<ng-container *ngIf="Array.isArray(item()) as isArray; else nonArrayBlock">
  <ng-container *ngIf="item() as currentItem">
    {{ currentItem.length }} <!-- currentItem 是数组类型 -->
  </ng-container>
</ng-container>
<ng-template #nonArrayBlock>
  <ng-container *ngIf="item() as currentItem">
    {{ currentItem }} <!-- currentItem 是非数组类型 -->
  </ng-container>
</ng-template>

方法3：在组件中创建派生Signal或类型守卫 #

可以在组件类中提前处理类型判断，将结果封装为派生Signal，让模板直接使用已收窄的类型：

// 组件类中
import { computed, Signal } from '@angular/core';

item: Signal<unknown | unknown[]>;

// 派生Signal，判断是否为数组
isItemArray = computed(() => Array.isArray(this.item()));
// 派生Signal，返回已收窄的数组类型
arrayItem = computed(() => this.isItemArray() ? this.item() as unknown[] : null);

模板中使用：

@if (isItemArray()) {
  {{ arrayItem()?.length }} <!-- arrayItem 已被收窄为数组类型 -->
} @else {
  {{ item() }}
}

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