УГЛОВОЙ 16 — СИГНАЛЫ
Вас интересует новая функция Angular 16, которая улучшит обнаружение изменений и сделает ваш код более реактивным?
Не ищите дальше сигналов Angular!
В этой статье мы представим сигналы Angular и объясним, какую пользу они могут принести вашим приложениям. Благодаря сигналам, доступным для разработчика в Angular v16, который должен быть выпущен в мае 2023 года, вы можете попробовать эту замечательную новую функцию уже сейчас. Мы даже покажем вам, как начать работу с сигналами Angular в ваших собственных проектах.
Давайте погрузимся в мир сигналов Angular!
Что такое угловые сигналы 🤔?
Сигналы - это реактивное значение, технически это функция с нулевым аргументом [(() => T)] , когда мы ее выполняем, они возвращают значение.
Примечание: значение плюс уведомление об изменении.
Сигнал — это просто особый тип переменной, которая содержит значение. Но в отличие от других переменных, сигнал также обеспечивает уведомление об изменении значения переменной.
Где мы можем использовать сигналы? - в любом месте вашего кода
Как использовать сигналы?
Мы создаем и инициализируем сигнал, вызывая функцию signal()
Example:
const count = signal(0);
// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());
Изменить сигналы
установить [set(value: T): void]
Для замены (установите для сигнала новое значение и уведомите всех иждивенцев)
count.set(3);
update[update(updateFn: (value: T) =› T)]
Для получения нового значения (обновите значение сигнала на основе его текущего значения и уведомите всех иждивенцев) операция обновления использует операцию set() для выполнения обновлений за кулисами.
// Increment the count by 1. count.update(value => value + 1);
mutate [mutate(mutatorFn: (value: T) =› void)]
Для выполнения внутренней мутации текущего значения (обновите текущее значение, изменив его на месте, и уведомите о любых иждивенцы)
const todos = signal([{title: 'Learn signals', done: false}]);
todos.mutate(value => {
// Change the first TODO in the array to 'done: true' without replacing it.
value[0].done = true;
});
Побочные эффекты на Сигнале — эффект()
Иногда, когда сигнал имеет новое значение, нам может понадобиться добавить побочный эффект. Для этого мы можем использовать функцию effect().
Effect планирует и запускает функцию с побочным эффектом внутри реактивного контекста.
Функция внутри эффекта будет переоценивать любое изменение, происходящее в сигналах, вызываемых внутри него. К функции эффекта можно добавить несколько сигналов.
вычисляется()
Что, если есть другое значение, которое зависит от значений других сигналов, и его необходимо пересчитывать всякий раз, когда изменяется любая из этих зависимостей?
В этом случае мы можем использовать функцию calculated() для создания нового сигнала, который автоматически обновляется при изменении его зависимостей.
const count: WritableSignal<number> = signal(0); const doubleCount: Signal<number> = computed(() => count() * 2);
*ДЕМО-КОД от @deborahk *: https://stackblitz.com/edit/angular-signals-deborahk?file=src%2Fmain.ts
https://www.linkedin.com/in/kristiyan-velkov-763130b3/
Если вам нравится моя работа, пожалуйста:
1. Пожертвовать 💕💸
Оплата на сайте Revolut или используйте QR-код выше.
Ваше пожертвование подпитывает мое стремление продолжать создавать значимую работу. Спасибо! 🦁💚
