Powtórzenie wiązania właściwości i zdarzeń
Wiąż dane z komponentami i odbieraj z nich zdarzenia.
Powtórzenie wiązania właściwości i zdarzeń to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Dwa kierunki przepływu danych
Template Angulara przesyła dane w dwóch kierunkach: wiązanie właściwości przekazuje dane do DOM, a wiązanie zdarzeń przesyła działania użytkownika z powrotem do komponentu.
Interpolacja
Interpolacja z użyciem podwójnych nawiasów klamrowych renderuje wartość komponentu jako tekst. Jest jednokierunkowa: z komponentu do widoku.
<p>{{ title }}</p>
// component
title = "Dashboard";Składnia wiązania właściwości
Nawiasy kwadratowe wiążą wartość komponentu z właściwością elementu lub komponentu. Wyrażenie po prawej stronie jest obliczane i przypisywane.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Wiązanie z inputami komponentu
Wiązanie właściwości przekazuje również wartości do właściwości @Input komponentu potomnego.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Atrybut a właściwość
Wiązanie właściwości dotyczy właściwości DOM, a nie atrybutów HTML. W przypadku samych atrybutów używaj prefiksu attr..
<button [attr.aria-label]="label">Save</button>Składnia wiązania zdarzeń
Nawiasy wiążą zdarzenie DOM z metodą komponentu. Metoda jest uruchamiana, gdy wystąpi zdarzenie.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }Obiekt $event
Specjalna zmienna $event przekazuje dane zdarzenia do handlera.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Wiązanie z outputami komponentu
Wiązanie zdarzeń nasłuchuje również zdarzeń @Output komponentu potomnego emitowanych za pomocą EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Łączenie obu wiązań
Użycie wiązania właściwości i wiązania zdarzeń jednocześnie dla tej samej właściwości stanowi podstawę wiązania dwukierunkowego, które zostanie omówione w następnej części.
<input [value]="name" (input)="name = $event.target.value">Wiązanie klas i stylów
Specjalne wiązania właściwości przełączają klasy i style na podstawie stanu komponentu.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Deklaratywne template
Wiązania pozwalają deklaratywnie opisać relację między danymi a widokiem. Angular automatycznie aktualizuje DOM, gdy zmieniają się powiązane wartości.
Szybkie sprawdzenie
Sprawdź swoją wiedzę o wiązaniu właściwości i zdarzeń.
Podsumowanie
Wiązanie właściwości [prop] przekazuje dane do widoku, wiązanie zdarzeń (event) przesyła działania z powrotem, a interpolacja renderuje tekst. Połączenie wiązania właściwości i zdarzeń dla tej samej wartości tworzy wiązanie dwukierunkowe.
Często zadawane pytania
Czy lekcja „Powtórzenie wiązania właściwości i zdarzeń” jest bezpłatna?
Tak — pełny tekst „Powtórzenie wiązania właściwości i zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Powtórzenie wiązania właściwości i zdarzeń”?
Wiąż dane z komponentami i odbieraj z nich zdarzenia. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Powtórzenie wiązania właściwości i zdarzeń”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Powtórzenie wiązania właściwości i zdarzeń
- Wiązanie dwukierunkowe za pomocą ngModel
- Dane wejściowe sygnału model()
- Niestandardowe właściwości obsługujące wiązanie dwukierunkowe