如何将 @if Angular 与异步管道和 else 块的别名一起使用？

Question

我有以下情况，当@if validatior（在角度17中引入）与else块一起使用时，使用可观察量进行验证并使用别名以避免多次订阅，在可观察量中使用别名的最佳方法是什么如果否则阻止？

可以使用其他 if 块嵌套 if 和 else 验证来解决。避免额外阻塞的最佳实现是什么？

   @if (validation$ | async; as validation) {
      @if (validation === 'if') {
        <h2>If block</h2>
        <div>Message: {{validation}}</div>
      } @else {
        <h3>Else block</h3>
        <legend>{{validation$ | async}}</legend>
      }
    }

期望这样的分辨率（伪代码），不支持这种方式：

 @if ((validation$ | async; as validation) === 'if') {
     <div>Message: {{validation}}</div>
 } @else {
     <legend>Other component: {{validation}}</legend>
 }

我应该使用额外的 if 块吗？

Stackblitz 示例

Answer 1

这是将在 18.1 中登陆的新

@let

模板变量声明所涵盖的用例之一

@let validation = (validation$ | async; as validation 

@if(validation === 'if') {
     <div>Message: {{validation}}</div>
} @else {
     <legend>Other component: {{validation}}</legend>
}