У цьому пості ми розглянемо сигнали (signals), нову функцію, яка була введена в Angular 17. Сигнали пропонують легкий та вбудований спосіб керувати станом і реактивними потоками даних в Angular-додатках. Наприкінці цього посту ви матимете чітке розуміння того, що таке сигнали, як вони працюють і як їх реалізувати.
Що таке сигнали?
Сигнали — це новий спосіб керувати станом і реактивними потоками даних, схожий на те, як працюють обсервабли (observables) або BehaviorSubject в RxJS. Однак сигнали безпосередньо вбудовані в Angular.
Основні особливості сигналів:
Керування станом
Сигнали обгортають значення і сповіщають споживачів (тобто компоненти чи сервіси), коли значення змінюється.
Реактивний потік даних
Сигнали забезпечують автоматичні оновлення в додатку щоразу, коли значення сигналу змінюється.
Легкість
Як частина ядра Angular, сигнали усувають потребу в додаткових бібліотеках, таких як RxJS.
Характеристики сигналів
Типи значень
Сигнали можуть зберігати будь-які типи значень, включаючи примітиви (наприклад, число, рядок) та складні об'єкти (наприклад, масиви, об'єкти).
Функція доступу (getter)
Сигнали надають функцію доступу для отримання їх поточного значення.
Відстеження залежностей
Angular стежить, де використовуються сигнали, і автоматично оновлює залежні компоненти чи сервіси, коли значення сигналу змінюється.
Типи сигналів
1. Записувані сигнали
Записувані сигнали дозволяють розробникам як зчитувати, так і оновлювати значення. Вони ідеальні для динамічних станів, які часто змінюються.
2. Тільки для читання
Сигнали тільки для читання дозволяють лише зчитувати значення, не дозволяючи безпосередньо змінювати його. Вони корисні для незмінних станів.
Створення та використання записуваних сигналів
Створення записуваного сигналу
import { signal } from '@angular/core';
// Створення сигналу з початковим значенням 0
const count = signal(0);
console.log(count()); // Виведе: 0
Оновлення значення сигналу
Записувані сигнали можна оновлювати за допомогою методів .set() та .update().
Використовуючи .set(): Безпосередньо встановлюється нове значення для сигналу
count.set(3);
console.log(count()); // Виведе: 3
Використовуючи .update(): Модифікується поточне значення на основі його попереднього значення.
count.update(value => value + 1);
console.log(count()); // Виведе: 4
Приклад коду: Компонент лічильника
Давайте створимо простий компонент лічильника для демонстрації використання сигналів.
// counter.component.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
})
export class CounterComponent {
count = signal(0); // Ініціалізація сигналу зі значенням 0
increment() {
this.count.update(value => value + 1);
}
decrement() {
this.count.update(value => value - 1);
}
}
Counter Example
Count: {{ count() }}
Increment Decrement
Результат
Коли ви запустите додаток і натиснете кнопки, лічильник буде збільшуватися або зменшуватися реактивно, і UI оновлюватиметься автоматично.🎉
Переваги використання сигналів
Спрощене керування станом
Сигнали усувають потребу в керуванні обсерваблами (observables) та підписками.
Реактивні оновлення
Angular автоматично відстежує використання сигналів і оновлює компоненти чи сервіси щоразу, коли значення сигналу змінюється.
Висновок
Сигнали в Angular пропонують спрощений, реактивний спосіб керувати та оновлювати стан. Вони спрощують керування станом та усувають надмірний код, який часто асоціюється з обсерваблами (observables) та підписками.
Якщо у вас є питання чи пропозиції, залишайте коментарі нижче. Якщо цей пост був корисний, поділіться ним або підпишіться на мене для отримання більше контенту по Angular. Дякую за прочитання! 😉
Перекладено з: Introduction to Signals in Angular