Перейти к содержанию

Сигналы

📅 30.09.2026

Создание динамических данных и работа с ними.

В Angular состояние создают и держат в сигналах. Сигнал — лёгкая обёртка над значением.

Локальное состояние кладут в сигнал функцией signal:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import {signal} from '@angular/core';

// Create a signal with the `signal` function.
const firstName = signal('Morgan');

// Read a signal value by calling it— signals are functions.
console.log(firstName());

// Change the value of this signal by calling its `set` method with a new value.
firstName.set('Jaime');

// You can also use the `update` method to change the value
// based on the previous value.
firstName.update((name) => name.toUpperCase());

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

Вычисляемые выражения

computed — сигнал, значение которого считается по другим сигналам.

1
2
3
4
5
6
import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());

console.log(firstNameCapitalized()); // MORGAN

Вычисляемый сигнал computed только для чтения: у него нет методов set и update. Значение меняется само, когда меняется любой сигнал, который он читает:

1
2
3
4
5
6
7
8
import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());
console.log(firstNameCapitalized()); // MORGAN

firstName.set('Jaime');
console.log(firstNameCapitalized()); // JAIME

Сигналы в компонентах

В компонентах состояние создают и ведут через signal и computed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
@Component({
  /* ... */
})
export class UserProfile {
  isTrial = signal(false);
  isTrialExpired = signal(false);
  showTrialDuration = computed(() => this.isTrial() && !this.isTrialExpired());

  activateTrial() {
    this.isTrial.set(true);
  }
}

Подробнее о сигналах Angular — в подробном руководстве по сигналам.

Следующий шаг

Динамические данные уже можно объявлять и менять. Дальше — как вывести их в шаблоне.

Источник: https://angular.dev/essentials/signals

Комментарии