Введение

С выходом Angular 18.1 в этой версии компилятора появилась новая интересная функция: возможность объявлять одну или несколько переменных шаблона.
Как используется эта функция и каковы различные варианты использования?

Эта статья призвана дать ответ.

Последняя функция компилятора: @let

В последних версиях Angular команда добавила в компилятор новую функциональность, и эта функциональность преобразуется в @-синтаксис.

Так появился новый синтаксис потока управления

• @если
• @для
• @выключатель

а совсем недавно @let

Как правило, самый простой способ создать переменную шаблона — использовать

• структурная директива *ngIf с ключевым словом as ключевое слово

или используя новый синтаксис потока управления

• @if с ключевым словом as

  {{ user.name }}



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

Эта удобная функция позволила нам сохранить результат асинхронного конвейера в переменной для дальнейшего использования в шаблоне.

Однако этот синтаксис вызывает несколько вопросов. Здесь условие проверяет, является ли возврат асинхронного канала истинным и, следовательно, отличается ли возвращаемое значение от любого значения, считающегося ложным в javascript.

Это условие будет работать очень хорошо, если возвращаемый результат — объект или массив.

но если возвращаемое значение является числом, особенно числом 0

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

Здесь на помощь приходит @let.

@let не проверяет условие, он просто позволяет вам простым способом объявить локальную переменную шаблона

так что приведенный выше пример кода становится намного проще и элегантнее в написании

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

Таким образом, переменная myNumber будет отображаться всегда.

Различные способы использования @let

Один из самых классических сценариев объявления переменных — сохранение результата сложного выражения.

Использовать функцию в условии всегда было нецелесообразно. Использование функции в условии влияло на производительность в том смысле, что при малейшем движении мыши или изменении шаблона функция пересчитывалась.

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

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

Используйте @let с сигналами

@let совместим с сигналами и используется следующим образом

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let и выражение JavaScript

Как видите, @let можно использовать для оценки любого вида выражения JavaScript, кроме, например, создания экземпляра класса

Таким образом интерпретируются арифметические операторы, и несколько переменных могут быть объявлены в нескольких разных строках или только в одной строке.

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

Другие крутые вещи, которые приносит @let

Как описано выше, поведение @let очень похоже на поведение let в javascript, которое имеет следующие преимущества

• область действия работает так же, как область действия let в javascript
• лучше печатать в шаблоне
• выдается ошибка, если переменная (let) используется до ее объявления