Прив'язка даних в Angular
Що таке зв'язування даних?
Зв'язування даних — це механізм, який з'єднує TypeScript клас компонента (дані/логіка) з шаблоном (HTML). Angular підтримує чотири типи зв'язування даних.
1. Інтерполяція (Одностороннє: Компонент → Шаблон)
Відображення даних компонента в шаблоні за допомогою подвійних фігурних дужок:
// app.component.ts
@Component({
template: \`
<h1>{{ title }}</h1>
<p>{{ 2 + 2 }}</p>
<p>{{ user.name.toUpperCase() }}</p>
\`
})
export class AppComponent {
title = 'Hello Angular';
user = { name: 'Alice' };
}2. Прив'язка властивостей (Одностороннє: Компонент → Шаблон)
Прив'язка даних компонента до властивості елемента:
<!-- Прив'язка до властивості DOM -->
<img [src]="imageUrl" [alt]="imageAlt">
<button [disabled]="isLoading">Відправити</button>
<div [class.active]="isActive">Контент</div>
<div [style.color]="textColor">Стильний</div>
<!-- Еквівалентно: -->
<img src="{{ imageUrl }}"> <!-- Тільки для строкових атрибутів -->3. Прив'язка подій (Одностороннє: Шаблон → Компонент)
Слухайте події DOM і викликайте методи компонента:
<button (click)="onClick()">Натисни на мене</button>
<input (input)="onInput($event)">
<form (submit)="onSubmit($event)">
<div (mouseenter)="onHover()" (mouseleave)="onLeave()">export class AppComponent {
onClick() {
console.log('Натиснуто!');
}
onInput(event: Event) {
const value = (event.target as HTMLInputElement).value;
console.log(value);
}
}4. Двостороннє зв'язування (Компонент ↔ Шаблон)
Поєднує прив'язку властивостей + прив'язку подій за допомогою [(ngModel)]:
<!-- Потребує імпорту FormsModule -->
<input [(ngModel)]="username">
<p>Привіт, {{ username }}!</p>
<!-- Еквівалентно: -->
<input [ngModel]="username" (ngModelChange)="username = $event">Резюме
| Тип | Синтаксис | Напрямок |
|---|---|---|
| Інтерполяція | {{ expression }} | Компонент → Шаблон |
| Прив'язка властивостей | [property]="expr" | Компонент → Шаблон |
| Прив'язка подій | (event)="handler" | Шаблон → Компонент |
| Двостороннє зв'язування | [(ngModel)]="prop" | Компонент ↔ Шаблон |
Важливо:
Система зв'язування даних Angular з'єднує клас компонента з шаблоном. Інтерполяція та прив'язка властивостей передають дані від компонента до вигляду. Прив'язка подій передає дані від вигляду до компонента. Двостороннє зв'язування ([(ngModel)]) поєднує обидва, підтримуючи синхронізацію між введенням та властивістю компонента.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.