24.05.2024 в 19:38

Введение в @let в Angular 18

В Angular 18 появилась новая интересная функция для разработчиков: директива @let. Этот инструмент помогает быстро и легко создавать переменные в HTML-коде. Давайте разберемся, как она работает, и посмотрим на несколько интересных примеров.

Что такое @let?

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

Как использовать @let?

Вот простой пример:

<div>
  @let greeting = 'Hello, ' + name + '!';
  <h1>{{ greeting }}</h1>
</div>

В этом примере мы создаём переменную greeting, которая конкатенирует строку Hello, с переменной name, а затем выводим её на экран.

Примеры использования

1. Вычисление общей цены

Представьте, что у вас есть список товаров, и вы хотите показать общую цену каждого из них. Вы можете сделать это следующим образом:

<div *ngFor="let product of products">
  @let totalPrice = product.price * product.quantity;
  <p>{{ product.name }} - Total: {{ totalPrice | currency }}</p>
</div>

Здесь totalPrice рассчитывается путем умножения цены товара (product.price) на его количество (product.quantity).

2. Форматирование дат

Вы можете легко форматировать даты. Предположим, у вас есть список событий:

<div *ngFor="let event of events">
  @let formattedDate = (new Date(event.date)).toLocaleDateString();
  <p>{{ event.name }} - Date: {{ formattedDate }}</p>
</div>

В данном случае функция formattedDate преобразует дату события (event.date) в более удобный для чтения формат.

3. Показ сообщений на основе условий

Вы можете создавать сообщения на основе условий, например, проверять, активен ли пользователь:

<div *ngFor="let user of users">
  @let statusMessage = user.isActive ? 'Active' : 'Inactive';
  <p>{{ user.name }} - Status: {{ statusMessage }}</p>
</div>

В этом примере statusMessage устанавливается в значение Active, если пользователь активен (user.isActive), или Inactive, если нет.

Более сложные примеры

4. Вычисление средних оценок

Давайте рассчитаем средние оценки студентов:

<div *ngFor="let student of students">
  @let total = student.grades.reduce((sum, grade) => sum + grade, 0);
  @let average = total / student.grades.length;
  <p>{{ student.name }} - Average: {{ average.toFixed(2) }}</p>
</div>

Здесь мы вычисляем сумму оценок (total), а затем среднее значение (average), отображая его с двумя знаками после запятой (toFixed(2)).

5. Фильтрация элементов в списке

Предположим, вы хотите показать только доступные товары:

<div *ngFor="let product of products">
  @let isAvailable = product.stock > 0;
  <div *ngIf="isAvailable">
    <p>{{ product.name }} - In stock: {{ product.stock }}</p>
  </div>
</div>

В этом случае isAvailable проверяет, есть ли товар на складе (product.stock > 0).

Преимущества @let с | async

Одной из проблем в Angular до появления @let была обработка асинхронных данных, особенно при работе с переменными наблюдения. Обычно использовалась функция | async, но для этого часто требовались дополнительные директивы вроде *ngIf, чтобы избежать неопределенных значений, либо приходилось создавать дополнительные компоненты или выполнять подпись вручную в коде TypeScript.

С @let работа с асинхронными данными становится более простой и элегантной:

<div>
  @let data = (data$ | async);
  @let processedData = data ? data.map(item => item.value) : [];
  <ul>
    <li *ngFor="let item of processedData">{{ item }}</li>
  </ul>
</div>

Здесь data$ — это переменная наблюдения, и, используя @let, мы можем напрямую обрабатывать асинхронные данные внутри шаблона без дополнительных директив или подписок. Директива @let обрабатывает асинхронный канал и обрабатывает данные в более удобном для чтения и лаконичном виде.

Когда не стоит использовать @let?

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

Сложная логика: Если логика, которая вам нужна, очень сложная, лучше сделать её на TypeScript, вне шаблона.
Возможность повторного использования: Если вам нужно использовать одну и ту же логику в нескольких местах, эффективнее создать функцию или метод в компоненте.
Производительность: В некоторых ситуациях, особенно при большом количестве элементов, @let может повлиять на производительность. Важно протестировать и убедиться, что все работает быстро.

Заключение

@let в Angular 18 — это мощный и простой в использовании инструмент, который помогает упростить код. С его помощью вы можете создавать локальные переменные прямо в HTML, делая ваш код чище и проще для понимания. Используйте @let для простых операций, а сложную логику оставляйте в TypeScript. Таким образом, вы получаете лучшее из обоих миров!

Источник:

Comment button

#Angular

Войти на сайт