Каковы отличия между различными типами привязок в Angular?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

В Angular существует несколько типов привязок (bindings), позволяющих синхронизировать данные между компонентом и шаблоном. Основные типы:

Property Binding (Привязка свойств): Передача данных из компонента в DOM элемент. Синтаксис: [property]="data". Используется для установки значения свойства DOM-элемента.
```
<img [src]="imageUrl">
```
Event Binding (Привязка событий): Реагирование на события DOM-элемента, вызывая метод компонента. Синтаксис: (event)="method()".
```
<button (click)="onClick()">Кликни меня</button>
```
Two-Way Binding (Двусторонняя привязка): Комбинирует property binding и event binding, позволяя синхронизировать данные между компонентом и DOM-элементом в обе стороны. Синтаксис: [(ngModel)]="data". Требует импорта FormsModule.
```
<input [(ngModel)]="userName">
```
Interpolation (Интерполяция): Встраивание строкового представления выражения в шаблон. Синтаксис: {{ expression }}. По сути, это синтаксический сахар для property binding ([textContent]="expression").
```
<p>Привет, {{ name }}!</p>
```
Attribute Binding (Привязка атрибутов): Установка значения HTML-атрибута (в отличие от свойства DOM). Синтаксис: [attr.attribute-name]="data". Чаще используется для атрибутов, которые не имеют соответствующего свойства DOM, например aria-*.
```
<button [attr.aria-label]="buttonLabel"></button>
```
Class Binding (Привязка классов): Динамическое добавление или удаление CSS-классов. Синтаксис: [class.class-name]="condition".
```
<div [class.active]="isActive"></div>
```
Style Binding (Привязка стилей): Динамическое применение стилей CSS. Синтаксис: [style.style-property]="value" или [style.style-property.unit]="value".
```
<p [style.color]="error ? 'red' : 'black'"></p>
<div [style.width.px]="width"></div>
```

Основные отличия можно свести к направлению потока данных и типу связываемых сущностей (свойства, события, атрибуты, классы, стили или текстовое содержимое).

Тип привязки	Синтаксис	Направление потока данных	Что связывает	Пример использования
Property Binding	`[property]="data"`	Компонент -> Шаблон	Свойства DOM-элементов	`<img [src]="imageUrl">`
Event Binding	`(event)="method()"`	Шаблон -> Компонент	События DOM-элементов	`<button (click)="onClick()">`
Two-Way Binding	`[(ngModel)]="data"`	Компонент <-> Шаблон	Данные формы (`ngModel`)	`<input [(ngModel)]="name">`
Interpolation	`{{ expression }}`	Компонент -> Шаблон	Строковое содержимое	`{{ userName }}`
Attribute Binding	`[attr.att]="data"`	Компонент -> Шаблон	HTML-атрибуты	`[attr.aria-label]="label"`
Class Binding	`[class.cls]="cond"`	Компонент -> Шаблон	CSS-классы	`[class.active]="isActive"`
Style Binding	`[style.sty]="val"`	Компонент -> Шаблон	CSS-стили	`[style.color]="color"`