Повторение связывания свойств и событий
Связывайте данные с компонентами и события от компонентов.
«Повторение связывания свойств и событий» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Два направления передачи данных
Шаблоны Angular передают данные в двух направлениях: привязка свойств передаёт данные в DOM, а привязка событий отправляет действия пользователя обратно в компонент.
Интерполяция
Интерполяция с двойными фигурными скобками отображает значение компонента как текст. Это односторонняя связь: от компонента к представлению.
<p>{{ title }}</p>
// component
title = "Dashboard";Синтаксис привязки свойств
Квадратные скобки связывают значение компонента со свойством элемента или компонента. Выражение справа вычисляется и присваивается.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Привязка к входным параметрам компонента
Привязка свойств также передаёт значения во входные свойства @Input дочернего компонента.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Атрибут и свойство
Привязка свойств обращается к свойствам DOM, а не к атрибутам HTML. Для обычных атрибутов используйте префикс attr..
<button [attr.aria-label]="label">Save</button>Синтаксис привязки событий
Круглые скобки связывают событие DOM с методом компонента. Метод выполняется при возникновении события.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }Объект $event
Специальная переменная $event передаёт данные события в обработчик.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Привязка к выходным событиям компонента
Привязка событий также прослушивает события @Output дочернего компонента, отправленные через EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Объединение обеих привязок
Одновременное использование привязки свойств и привязки событий для одного свойства — основа двусторонней привязки, которую Вы увидите далее.
<input [value]="name" (input)="name = $event.target.value">Привязки классов и стилей
Специальные привязки свойств переключают классы и стили в зависимости от состояния компонента.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Декларативные шаблоны
Привязки декларативно описывают связь между данными и представлением. Angular автоматически обновляет DOM при изменении связанных значений.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли привязку свойств и событий.
Итоги
Привязка свойств [prop] передаёт данные в представление, привязка событий (event) отправляет действия обратно, а интерполяция отображает текст. Объединение привязки свойства и события для одного значения создаёт двустороннюю привязку.
Часто задаваемые вопросы
Урок «Повторение связывания свойств и событий» бесплатный?
Да — полный текст урока «Повторение связывания свойств и событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Повторение связывания свойств и событий»?
Связывайте данные с компонентами и события от компонентов. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Повторение связывания свойств и событий»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Повторение связывания свойств и событий
- Двустороннее связывание с ngModel
- Входные сигналы model()
- Пользовательские свойства с двусторонним связыванием