Сигналы в шаблонах
Связывайте значения сигналов непосредственно в шаблонах компонентов.
«Сигналы в шаблонах» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Сигналы в шаблонах
Одно из главных преимуществ сигналов — возможность читать их непосредственно в шаблонах, вызывая их так же, как в TypeScript. Асинхронный pipe не требуется.
Чтение в интерполяции
В шаблоне вызовите сигнал внутри интерполяции с двойными фигурными скобками, чтобы отобразить его значение.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Асинхронный pipe не требуется
При работе с наблюдаемыми объектами требовался асинхронный pipe для подписки и отписки. Сигналы синхронны, поэтому их достаточно просто вызвать. Отписываться не нужно.
Автоматическое обновление представления
Когда прочитанный в шаблоне сигнал изменяется, Angular понимает, что шаблон от него зависит, и обновляет только эту привязку. Так проявляется мелкозернистая реактивность.
Вызов сигналов в обработчиках событий
Привязывайте события к методам компонентов, которые обновляют сигналы. Шаблон автоматически заново отображает затронутые привязки.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Сигналы в привязках свойств
Вы можете вызвать сигнал внутри любой привязки, включая привязки свойств и атрибутов.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Сигналы со встроенным управлением потоком
В современных шаблонах используются встроенные блоки управления потоком. Чтобы прочитать сигнал внутри блока if, вызовите его.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Вычисляемые сигналы в шаблонах
Производные значения отлично подходят для шаблонов. Вычисляемый сигнал пересчитывается только при изменении его источников и читается тем же способом.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Чтение вычисляемого сигнала в представлении
Читайте вычисляемый сигнал в шаблоне так же, как любой другой сигнал.
// template: <p>Total: {{ total() }}</p>Почему это эффективно
Angular отслеживает, какие именно выражения шаблона читают какие сигналы, поэтому может пропускать обработку частей представления, которые не зависели от изменившегося сигнала.
Распространённая ошибка: забытые скобки
Если в шаблоне написать count вместо count(), отобразится сама функция сигнала, а не её значение. Всегда вызывайте сигнал.
Быстрая проверка: шаблоны
Как сигналы используются в шаблонах?
Итоги: сигналы в шаблонах
Вы читаете сигналы в шаблонах, вызывая их в скобках, без асинхронного pipe и без необходимости отписки. Angular обновляет только привязки, зависящие от изменившегося сигнала, а вычисляемые сигналы работают так же. Вы завершили изучение основ сигналов.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 38
- Уроки
- 144
Часто задаваемые вопросы
Урок «Сигналы в шаблонах» бесплатный?
Да — полный текст урока «Сигналы в шаблонах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Сигналы в шаблонах»?
Связывайте значения сигналов непосредственно в шаблонах компонентов. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Сигналы в шаблонах»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое сигналы
- Создание и чтение сигналов
- Обновление сигналов с помощью set и update
- Сигналы в шаблонах