Angular Academy · Lekcja

Jak działa wykrywanie zmian

Zrozumieć cykl wykrywania zmian w Angularze

Jak działa wykrywanie zmian 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.

Czym jest wykrywanie zmian

Wykrywanie zmian to proces, za pomocą którego Angular utrzymuje synchronizację DOM ze stanem komponentu. Gdy dane się zmieniają, Angular ponownie oblicza wiązania i aktualizuje tylko to, co się różni.

Cykl wykrywania

Angular przechodzi przez drzewo komponentów od korzenia w dół, sprawdzając wiązania każdego komponentu. To przejście z góry w dół stanowi jeden cykl wykrywania zmian (tick).

Co wyzwala tick

Domyślnie Angular uruchamia wykrywanie zmian po zdarzeniach asynchronicznych: zdarzeniach DOM, timerach i odpowiedziach HTTP. Koordynuje to Zone.js.

Zone.js

Zone.js modyfikuje za pomocą monkey patchingu asynchroniczne interfejsy API (setTimeout, addEventListener, Promise, XHR), dzięki czemu Angular wie, kiedy jedno z nich się zakończyło i może być potrzebny tick.

// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.

NgZone

NgZone opakowuje Zone.js na potrzeby Angulara. Można uruchamiać kod poza strefą Angulara, aby uniknąć wyzwalania wykrywania zmian w intensywnych pętlach.

private zone = inject(NgZone);

this.zone.runOutsideAngular(() => {
  // heavy work, no CD triggered
});

Ponowne wejście do strefy

Aby zaktualizować interfejs poza strefą, należy ponownie do niej wejść za pomocą run, dzięki czemu Angular zaplanuje tick.

this.zone.run(() => {
  this.ready = true;
});

Strategia domyślna

W przypadku strategii domyślnej każdy komponent jest sprawdzany przy każdym ticku. Jest to proste i bezpieczne rozwiązanie, ale w dużych drzewach może być nieefektywne.

Porównywanie wiązań

Angular porównuje bieżącą wartość każdego wiązania z jego poprzednią wartością za pomocą Object.is. Jeśli wartość się nie zmieniła, DOM pozostaje niezmieniony.

Wyrażenia powinny być czyste

Wyrażenia szablonu są wykonywane przy każdym sprawdzeniu, dlatego muszą być szybkie i pozbawione efektów ubocznych. Należy unikać bezpośredniego wywoływania kosztownych funkcji w szablonach.

<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>

ExpressionChangedAfterChecked

W trybie deweloperskim Angular wykonuje drugie przejście weryfikacyjne. Jeśli wartość zmieni się między przejściami, pojawi się błąd ExpressionChangedAfterItHasBeenCheckedError, sygnalizujący zmianę stanu podczas renderowania.

Sterowanie ręczne

Należy wstrzyknąć ChangeDetectorRef, aby kontrolować wykrywanie zmian: markForCheck(), detectChanges() i detach() zapewniają szczegółową kontrolę.

private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();

Szybki test

Proszę sprawdzić swoją wiedzę na temat wykrywania zmian.

Podsumowanie

Dowiedzieli się Państwo, że wykrywanie zmian to przejście przez drzewo z góry w dół, które synchronizuje stan z DOM, wyzwalane przez zdarzenia asynchroniczne za pośrednictwem Zone.js lub NgZone i porównujące wiązania za pomocą Object.is. ChangeDetectorRef zapewnia ręczną kontrolę.

Często zadawane pytania

Czy lekcja „Jak działa wykrywanie zmian” jest bezpłatna?

Tak — pełny tekst „Jak działa wykrywanie zmian” 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 „Jak działa wykrywanie zmian”?

Zrozumieć cykl wykrywania zmian w Angularze Ć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 „Jak działa wykrywanie zmian”?

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

← Powrót do Angular Academy