Angular Academy · Lekcja

Dane wejściowe sygnału model()

Twórz wiązania dwukierunkowe za pomocą sygnałów modelu.

Dane wejściowe sygnału model() to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.

Sygnały spotykają wiązanie dwukierunkowe

Nowoczesny Angular udostępnia model() — oparty na sygnałach sposób tworzenia inputów obsługujących wiązanie dwukierunkowe bez ręcznego łączenia inputu i outputu.

Deklarowanie inputu modelu

Wywołaj model(), aby utworzyć zapisywalny sygnał, z którym komponent nadrzędny może utworzyć wiązanie dwukierunkowe.

import { Component, model } from "@angular/core";

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

Wiązanie z komponentu nadrzędnego

Komponent nadrzędny używa składni banana w pudełku względem nazwy modelu, dokładnie tak jak w przypadku ngModel.

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

Odczytywanie wartości modelu

Model jest sygnałem, dlatego odczytuje się go, wywołując go jak funkcję.

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

Zapisywanie do modelu

Aktualizuj model za pomocą set lub update. Zmiana jest automatycznie przekazywana do komponentu nadrzędnego.

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

Wymagane inputy modelu

Użyj model.required(), gdy komponent nadrzędny musi przekazać wartość.

import { model } from "@angular/core";

export class FieldComponent {
  value = model.required<string>();
}

Używanie modelu w template

Powiąż sygnał modelu bezpośrednio we własnym template komponentu; jego wywołanie zwraca bieżącą wartość.

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

Nie potrzeba ręcznego outputu

W przypadku model() nie deklarujesz osobnego @Output. Angular konfiguruje za Ciebie zdarzenie zmiany, używając nazwy zgodnej z konwencją oraz przyrostka Change.

model a input

Zwykły input() jest tylko do odczytu wewnątrz komponentu, natomiast model() można zapisywać i obsługuje wiązanie dwukierunkowe z komponentem nadrzędnym.

// read-only:
label = input("");

// two-way writable:
value = model("");

Licznik z użyciem model

Oto samodzielny licznik, którego wartość pozostaje zsynchronizowana z komponentem nadrzędnym.

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

Kiedy używać model

Używaj model(), gdy komponent potomny zarządza wartością, którą komponent nadrzędny również chce odczytywać i aktualizować, na przykład w niestandardowych kontrolkach formularza, przełącznikach i suwakach.

Szybkie sprawdzenie

Sprawdź swoją wiedzę o inputach sygnałowych modelu.

Podsumowanie

Funkcja model() tworzy zapisywalny sygnał obsługujący wiązanie dwukierunkowe bez ręcznego łączenia inputu i outputu. Odczytuj go przez wywołanie, zapisuj za pomocą set lub update, a z komponentu nadrzędnego wiąż za pomocą [(name)].

Często zadawane pytania

Czy lekcja „Dane wejściowe sygnału model()” jest bezpłatna?

Tak — pełny tekst „Dane wejściowe sygnału model()” 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 „Dane wejściowe sygnału model()”?

Twórz wiązania dwukierunkowe za pomocą sygnałów modelu. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Dane wejściowe sygnału model()”?

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

← Powrót do Angular Academy