Sygnały w szablonach
Bezpośrednio wiąż wartości sygnałów w szablonach komponentów.
Sygnały w szablonach to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.
Signals w szablonach
Jedną z największych zalet signals jest możliwość odczytywania ich bezpośrednio w szablonach przez wywołanie, podobnie jak w TypeScript. Nie jest wymagany async pipe.
Odczyt w interpolacji
W szablonie należy wywołać signal wewnątrz interpolacji z podwójnymi nawiasami klamrowymi, aby wyświetlić jego wartość.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Async pipe nie jest potrzebny
W przypadku Observables potrzebowali Państwo async pipe do subskrybowania i anulowania subskrypcji. Signals działają synchronicznie, więc wystarczy je wywołać. Nie trzeba anulować żadnej subskrypcji.
Automatyczne aktualizowanie widoku
Gdy zmieni się signal odczytywany w szablonie, Angular wie, że szablon od niego zależy, i aktualizuje tylko to powiązanie. To właśnie reaktywność drobnoziarnista w praktyce.
Wywoływanie signals w obsłudze zdarzeń
Należy powiązać zdarzenia z metodami komponentu, które aktualizują signals. Szablon automatycznie renderuje ponownie zmienione powiązania.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals w powiązaniach właściwości
Signal można wywołać w dowolnym powiązaniu, w tym w powiązaniach właściwości i atrybutów.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals i wbudowany przepływ sterowania
Nowoczesne szablony korzystają z wbudowanych bloków przepływu sterowania. Signal w bloku if odczytuje się przez jego wywołanie.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Computed signals w szablonach
Wartości pochodne świetnie sprawdzają się w szablonach. Computed signal przelicza się ponownie tylko wtedy, gdy zmienią się jego źródła, i odczytuje się go w ten sam sposób.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Odczytywanie computed w widoku
Computed signal odczytuje się w szablonie tak samo jak każdy inny signal.
// template: <p>Total: {{ total() }}</p>Dlaczego to jest wydajne
Ponieważ Angular dokładnie śledzi, które wyrażenia szablonu odczytują poszczególne signals, może pominąć pracę dotyczącą tych części widoku, które nie zależały od zmienionego signal.
Częsty problem: zapomniane nawiasy
Jeśli w szablonie zapiszą Państwo count zamiast count(), wyświetlona zostanie sama funkcja signal, a nie jego wartość. Signal należy zawsze wywoływać.
Szybkie sprawdzenie: szablony
Jak signals pojawiają się w szablonach?
Podsumowanie: signals w szablonach
Signals odczytuje się w szablonach przez wywołanie ich za pomocą nawiasów, bez async pipe i bez konieczności anulowania subskrypcji. Angular aktualizuje tylko te powiązania, które zależą od zmienionego signal, a computed signals działają w ten sam sposób. Ukończyli Państwo podstawy Signals.
Często zadawane pytania
Czy lekcja „Sygnały w szablonach” jest bezpłatna?
Tak — pełny tekst „Sygnały w szablonach” 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 „Sygnały w szablonach”?
Bezpośrednio wiąż wartości sygnałów w szablonach komponentów. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Sygnały w szablonach”?
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
- Czym są sygnały
- Tworzenie i odczytywanie sygnałów
- Aktualizowanie sygnałów za pomocą set i update
- Sygnały w szablonach