Angular Academy · Ders

Yönlendirici Olayları ve Gezinme

Gezinme yaşam döngüsü olaylarına yanıt verin

Yönlendirici Olayları ve Gezinme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Yönlendirici olay akışı

Router.events, gezinme yaşam döngüsü boyunca olaylar yayınlayan bir observable'dır: başlangıç, tanıma, guard denetimleri, çözümleme ve bitiş. Gezinmeye genel olarak tepki vermek için buna subscribe olun.

Temel olay türleri

Yaygın olaylar: NavigationStart, NavigationEnd, NavigationCancel, NavigationError. Her biri filtreleyebileceğiniz bir sınıf örneğidir.

NavigationEnd olayını dinleme

Akışı belirli bir olay türüne filtrelemek için filter ve bir instanceof denetimi kullanın.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

Genel yüklenme göstergesi

NavigationStart ile NavigationEnd/Cancel/Error arasında bir yüklenme simgesi gösterin.

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

Gezinmede en üste kaydırma

Her başarılı gezinmeden sonra kaydırma konumunu sıfırlayın. (Yerleşik scrollPositionRestoration seçeneği de vardır.)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

Analiz için sayfa takibi

NavigationEnd, sayfa görüntülemelerini analiz sistemine kaydetmek için ideal kancadır.

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

Programatik gezinme

router.navigate bir komutlar dizisi alır; router.navigateByUrl ise tam bir URL dizesi alır. Her ikisi de gezinmenin başarılı olup olmadığını belirten bir promise döndürür.

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

Göreli gezinme

Geçerli route'a göre gezinmek için relativeTo kullanın; örneğin bir alt bileşenden gezinirken.

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink ve etkin durum

Şablonlarda routerLink gezinmeyi bildirimsel olarak yönetir, routerLinkActive ise etkin bağlantıya bir CSS sınıfı ekler.

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

NavigationError işlemesi

Başarısız gezinmeleri (örneğin başarısız bir çözümleyici veya lazy-load işlemini) ele almak ve kullanıcıya anlaşılır bir ileti göstermek için NavigationError olayına subscribe olun.

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

Tür bilgili olay filtreleme

Angular ayrıca RouterEvent tür bilgisini sunar; filter içindeki bir tür guard'ı koşulu, dönüştürme yapmadan abone içindeki olayın doğru türde olmasını sağlar.

Hızlı Kontrol

Yönlendirici olayları hakkındaki anlayışınızı test edin.

Özet: Yönlendirici Olayları ve Gezinme

Router.events, gezinme yaşam döngüsünü dışa açar.

NavigationStart/End/Cancel/Error için filtre uygulayın.
Yüklenme simgelerini, kaydırma sıfırlamayı ve analiz işlemlerini yönetin.
navigate/navigateByUrl veya routerLink ile gezinin.

Angular Router Advanced dersini tamamladınız.

Sıkça Sorulan Sorular

“Yönlendirici Olayları ve Gezinme” dersi ücretsiz mi?

Evet — “Yönlendirici Olayları ve Gezinme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Yönlendirici Olayları ve Gezinme” dersinde ne öğreneceğim?

Gezinme yaşam döngüsü olaylarına yanıt verin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Yönlendirici Olayları ve Gezinme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Rota Parametreleri ve Sorgu Parametreleri
Çözümleyiciler ve Rota Verileri
İşlevsel Rota Korumaları
Yönlendirici Olayları ve Gezinme

← Angular Academy Sayfasına Dön