我们正在扩展 Angular 的内置模板语法，为开发人员提供更好的方法来定义组件模板内的变量。

新的 @let 语法将使开发人员能够定义变量并在整个模板中重用其值。这种新语法还解决了社区最受支持的问题之一。

继续阅读以了解如何在模板中使用 @let 来改善开发体验。

定义可重用模板变量的新方法

尽管 Angular 的模板语法支持一些复杂的 JavaScript 表达式，但还没有一种无障碍的方法来存储表达式的结果，同时还能在模板中重复使用。

开发人员不得不采用非人体工程学的 Directive 或其他解决方案来实现这一目标。

让我们看看新的语法：

@let name = value; // 其中 value 是一个有效的 Angular 表达式

现在，在模板中，可以根据 Angular 的模板语法规则和约定来定义和使用变量。例如：

@let name = 'Frodo';
<h1>Dashboard for {{name}}</h1>
Hello, {{name}}

这是如何在模板中使用 @let 的另一个示例：

<!-- 与引用元素的模板变量一起使用 -->
<input #name>

@let greeting = 'Hello ' + name.value;

<!-- 与 async pipe 一起使用 -->
@let user = user$ | async;

使用新的 @let 声明时，请记住它们的作用域为当前视图及其后代，但不能由父视图或同级视图访问。

@let topLevel = value;

@if (condition) {
  @let nested = value;
}

<div *ngIf="condition">
  @let nestedNgIf = value;
</div>

<!-- 合法 -->
{{topLevel}}
<!-- 错误，未从 @if 中提升 -->

{{nested}}
<!-- 错误，未从 *ngIf 中提升 -->

{{nestedNgIf}}

@let 声明是只读的，不能重新分配。它们的值将在每次更改检测时重新计算（例如，如果异步管道发生更改）。尝试直接写入它们将导致类型检查错误。

@let value = 10;

<!-- 错误: `value` 是不可赋值的 -->
<button (click)="value = value + 1">Change the value</button>

语法定义

让我们探讨一下 @let 语法的语法定义的一些细节。新语法的正式定义是：

• @let 关键字。
• 后跟一个或多个空格，不包括换行符。
• 后跟 = 符号和零个或多个空格。
• 后面是一个可以是多行的 Angular 表达式。
• 以 ; 符号终止。

@let the fun begin (好戏开始)

我们很高兴发布这一新功能，并希望它能够改善您的开发人员体验。我们很想听听您对新 @let 语法的想法，因此请回复此博文或通过Angular.dev、 x.com/Angular和youtube.com/@Angular在线联系我们。

原文链接：https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f

翻译链接：https://zhuanlan.zhihu.com/p/708221383