如何在模板中声明变量？

Question

我有一个这样定义的信号：

export enum LoadingReason {
  indexingFiles,
}

export interface LoadingState {
  reason: LoadingReason;
  percent?: number;
}

isLoading: Signal<false | LoadingState>;

在模板中，我尝试读取percent属性，这会产生静态错误，因为Typescript无法保证

isLoading()

的类型不是

false

。

@if(isLoading() !== false && isLoading().percent === undefined){
  <mat-spinner diameter="30"></mat-spinner>
}

通常，在控制器端，这可以通过定义一个保存信号内容的变量来解决。

示例（无法在模板中完成，但可以在控制器中完成）：

const isLoading = this.isLoading();
if (isLoading !== false && isLoading.percent !== undefined) {
...
}

如何使用 Angular 的信号处理这种情况？

Answer 1

从 Angular 18.1 开始，您可以使用

@let

声明本地模板变量，如下所示：

@let loading = isLoading();
@if (loading !== false && loading.percent === undefined) {
  <mat-spinner diameter="30" />
}

StackBlitz 演示

从 Angular v18.x 开始，

@let

处于 开发者预览版，在升级到稳定版本之前可能会发生变化