Как объявить новые имена переменных в шаблонах Angular 17?

Question

Во всех версиях Angular <17 можно было объявлять новые имена переменных или, что лучше: создавать псевдонимы переменных в шаблонах, как в этом упрощенном примере:

      <ng-container *ngIf="objectlist$ | async as list">
    {{ list.name }}
</ng-container>

Теперь Angular 17 представил новый@ifсинтаксис (что мне очень нравится). Поэтому я бы конвертировал фрагмент следующим образом:

      @if (objectlist$ | async as list) {
    {{ list.name }}
}

Однако это не работает, потому чтоas listне работает с новой синтаксической схемой. Но как мне добиться того же, что и исходный сценарий, с новым синтаксисом?

Answer 1

Псевдоним по-прежнему поддерживается в синтаксисе потока управления , если вы добавляете точку с запятой (;) послетрубка:

      @if (objectlist$ | async; as list) {
    {{ list.name }}
}

Однако псевдоним не поддерживается св синтаксисе потока управления.поддерживается только для обратной совместимости. См. эту проблему в репозитории Angular GitHub: Разрешить использовать псевдонимы блоков @else if в синтаксисе потока управления #52103.

Соответствующие части:

Мы обсуждали это некоторое время назад, но решили не поддерживать, поскольку псевдоним существует только для обратной совместимости с ngIf.

и

Мы подробно обсуждали этот конкретный момент во время разработки потока управления и решили не расширять поддержку as. В частности, @if в компонентах сигнала вообще не будет поддерживать его, поскольку он несовместим с потоком данных сигнала.

as фактически является объявлением локальной переменной, аналогично let Internal = Outer.expression;. Если вы представляете, что внешнее выражение считывает сигналы, то внутреннее выражение кэширует полученное значение, чтобы использовать его в дочернем шаблоне. Это «теряет реактивность» — дочерний шаблон никогда не будет обновляться, потому что он не выполняет считывание сигнала самостоятельно. Вместо этого вычисленные сигналы решают эту проблему гораздо более каноническим способом.