一段时间以来，Angular 一直保持着强劲的势头，Angular 团队也证明了它对社区的关心。在 Angular v17 和随后的小版本中，Angular 团队提供了许多出色的功能，其中最突出的功能是新的内置 block 模板语法，即使在开发者预览版中也是如此，它简化了使用模板。
在最近的版本中，Angular 存储库中两个期待已久的问题已得到解决。 Angular 主要版本 v18 提供了统一控制状态更改事件以及其他功能，次要版本 v18.1 通过向模板添加新的内置功能来利用 block 模板语法称为模板局部变量，用@let块表示。
查看官方博客文章，了解更多关于 @let 变量如何定义、工作、限制以及它们如何更新其值的信息。
简单来说，模板局部变量，允许 Angular 开发人员在模板中声明变量，就像我们在组件的类中所做的那样，简化了我们在模板中编写逻辑的方式，从而为某些旧的模板模式，并引入 @eneajaho 的本文中介绍的新用例。
本文的动机来自 Reddit 帖子，询问是否需要 @let 声明以及为什么应该使用它们。
您可以在此处找到主要 Angular 贡献者 Matthieu Riegler 关于此主题的观点。
在本文中，我想展示这些本地模板变量的用例我发现在我从事的项目中很有用，我不再需要使用 RxJS 进行“缓存”shareReplay 运算符，用于在不同模板部分中使用相同的数据。
让我们深入了解一下？.
HttpClient。由于在大多数情况下，获取的数据都绑定在模板中，因此开发人员遵循声明式方法，将 Async 管道作为最佳实践 - 自动订阅模板中的可观察对象，并在组件被销毁时取消订阅？ :
...
@Component({
...
template: `
...
<main>
... ?
@if (todo$ | async; as todo) {
<p>Title: {{todo.title}}</p>
}
</main>
...
`,
standalone: true,
...
})
export class ShareReplayComponent {
todo$ = inject(HttpClient)
.get<Todo>('https://jsonplaceholder.typicode.com/todos/1');
}
Async 管道绑定 ?:
...
@Component({
template: `
...
<main>
... ?
@if (todo$ | async; as todo) {
<p>Title: {{todo.title}}</p>
}
</main>
<aside>
... ?
@if (todo$ | async; as todo) {
<p>Is Completed: {{todo.completed}}</p>
}
</aside>
...
`,
standalone: true,
})
export class ShareReplayComponent {
todo$ = inject(HttpClient)
.get<Todo>('https://jsonplaceholder.typicode.com/todos/1');
}
shareReplay 运算符使用 RxJS 缓存第一个触发的 HTTP 请求的数据：
...
@Component({
template: `
...
<main>
... ?
@if (todo$ | async; as todo) {
<p>Title: {{todo.title}}</p>
}
</main>
<aside>
... ?
@if (todo$ | async; as todo) {
<p>Is Completed: {{todo.completed}}</p>
}
</aside>
...
`,
standalone: true,
})
export class ShareReplayComponent {
todo$ = inject(HttpClient)
.get<Todo>('https://jsonplaceholder.typicode.com/todos/1')
.pipe(shareReplay(1)); ?
}
Async 管道绑定和订阅相同的可观察流，也只会触发一个 HTTP 请求，并且响应数据会被缓存 ?:
让我们来看看？.
用于简化的 @let 声明
@let 声明提供了一种更简单、基于模板的替代方案 ?:
...
@Component({
template: `
...
@let todo = todo$ | async; ?
<main>
...
@if (todo) {
<p>Title: {{todo.title}}</p>
}
</main>
<aside>
...
@if (todo) {
<p>Is Completed: {{todo.completed}}</p>
}
</aside>
...
`,
standalone: true,
})
export class LetVariablesComponent {
todo$ = inject(HttpClient)
.get<Todo>('https://jsonplaceholder.typicode.com/todos/1');
}
shareReplay 运算符进行 RxJS 缓存。 ??
注意？：此解决方案在缓存模板数据时有效。如果组件的类中需要缓存数据，则需要shareReplay 运算符。
感谢您的阅读！
我希望你喜欢它？如果您喜欢这篇文章，请与您的朋友和同事分享。
如有任何问题或建议，请随时在下面评论？.
如果这篇文章对您来说有趣且有用，并且您不想错过以后的文章，请通过 @lilbeqiri、dev.to 或 Medium 关注我。 ？
以上是Angular @let 声明：智能模板订阅的详细内容。更多信息请关注PHP中文网其他相关文章！
