Как использовать @if angular с асинхронным каналом и псевдонимом для блока else?

У меня есть следующий случай, когда @if validatior (представленный в angular 17) используется с блоком else, проверяется с помощью наблюдаемого и использует псевдоним, чтобы избежать нескольких подписок. Как лучше всего использовать псевдоним с наблюдаемым в if еще заблокировать?

Возможно решение с помощью другого блока 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

🤔 А знаете ли вы, что...
Angular предлагает мощную систему инъекции зависимостей для управления зависимостями и компонентами приложения.


80
1

Ответ:

Решено

Это один из вариантов использования, который будет охвачен новым объявлением переменной шаблона @let, которое появится в версии 18.1.

@let validation = validation$ | async;

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

Кстати, не забывайте, что AsyncPipe возвращает ноль до тех пор, пока первое значение не будет отправлено по каналу.