Создание и чтение сигналов
Объявляйте доступные для записи сигналы и считывайте их значения.
«Создание и чтение сигналов» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Создание сигнала
Создайте изменяемый сигнал с помощью фабрики signal(), передав начальное значение.
import { signal } from '@angular/core';
const c = signal(0); // initial value is 0Начальное значение задаёт тип
TypeScript выводит тип сигнала из начального значения. signal(0) имеет тип WritableSignal<number>.
const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false); // WritableSignal<boolean>Чтение сигнала
Вызовите сигнал, чтобы прочитать его текущее значение. Это возвращает сохранённое значение и регистрирует зависимость, если вызов выполняется внутри реактивного контекста.
const c = signal(0);
const current = c(); // current === 0Многократное чтение
Вы можете читать сигнал столько раз, сколько нужно. Каждый вызов возвращает самое последнее значение на момент вызова.
const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10Явное указание типа
Можно явно указать тип, если начальное значение не полностью его отражает, например если значение также может быть равно null.
const user = signal<string | null>(null);
console.log(user()); // nullСигналы с объектами
Сигнал может хранить любое значение, включая объекты и массивы.
const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0Сигналы с массивами
С массивами всё работает так же. При чтении возвращается текущая ссылка на массив.
const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2Сигналы как поля класса
В компонентах и службах объявляйте сигналы как поля. Они инициализируются один раз при создании экземпляра.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
}Чтение в классе компонента
Вы можете читать сигнал в любом месте класса, например внутри метода, вызывая его.
export class CounterStore {
count = signal(0);
isZero(): boolean {
return this.count() === 0;
}
}Доступ только для чтения
Если нужно предоставить сигнал потребителям, не позволяя им изменять его, предоставьте его через метод asReadonly().
const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not availableСоглашения об именовании
Распространённое соглашение — называть сигнал по хранимому в нём значению (например, count, items), поскольку чтение выглядит как обычный доступ: count().
Быстрая проверка: создание сигналов
Проверьте, насколько хорошо вы усвоили создание и чтение сигналов.
Повторение: создание и чтение
Теперь вы знаете, как создать изменяемый сигнал с помощью signal(initialValue), как TypeScript выводит его тип и как прочитать его, вызвав сигнал. Вы также увидели, как использовать asReadonly() для предоставления доступа только для чтения. Далее: обновление значений сигналов.
Часто задаваемые вопросы
Урок «Создание и чтение сигналов» бесплатный?
Да — полный текст урока «Создание и чтение сигналов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание и чтение сигналов»?
Объявляйте доступные для записи сигналы и считывайте их значения. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Создание и чтение сигналов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое сигналы
- Создание и чтение сигналов
- Обновление сигналов с помощью set и update
- Сигналы в шаблонах