Middle
118
questionbank
Каковы отличия между различными типами привязки данных в Angular?
Ответ от нейросети
sobes.tech AI
Односторонняя привязка данных:
- Привязка свойств Property Binding
[property]="value": Поток данных из компонента в шаблон. Используется для установки значений атрибутов HTML-элементов (например,[src],[href],[disabled]). - Интерполяция
{{ value }}: Поток данных из компонента в шаблон. Преобразует значение выражения в строку и вставляет его в DOM. - Привязка атрибутов Attribute Binding
[attr.attribute-name]="value": Поток данных из компонента в шаблон. Используется для установки значений атрибутов, которые не имеют соответствующих свойств DOM (например,aria-*,colspan).
Двусторонняя привязка данных:
[(ngModel)]="value": Сокращение для комбинации привязки свойств и привязки событий ([ngModel]="value"и(ngModelChange)="value = $event"). Обеспечивает синхронизацию данных между свойством компонента и элементом формы. Требует импортаFormsModule.
Односторонняя привязка событий:
- Привязка событий Event Binding
(event)="method()": Поток данных из шаблона в компонент. Реагирует на события DOM (например,click,input,submit) и вызывает метод в компоненте.
| Тип привязки | Направление потока данных | Синтаксис | Примеры использования |
|---|---|---|---|
| Привязка свойств | Компонент -> Шаблон | [src]="imgUrl" |
Установка src изображения |
| Интерполяция | Компонент -> Шаблон | {{ title }} |
Отображение текста заголовка |
| Привязка атрибутов | Компонент -> Шаблон | [attr.colspan]="colspan" |
Установка colspan в табличной ячейке |
| Двусторонняя привязка | Компонент <=> Шаблон | [(ngModel)]="name" |
Связывание поля ввода формы с переменной компонента |
| Привязка событий | Шаблон -> Компонент | (click)="onClick()" |
Вызов метода компонента при клике на кнопку |