Router Yaşam Döngüsü ve Olaylar

Angular Router, navigasyon değişikliklerine yanıt vermenize ve yönlendirme süreci sırasında özel mantık çalıştırmanıza olanak tanıyan kapsamlı bir yaşam döngüsü kancaları ve olaylar seti sağlar.

Yaygın router olayları

Angular Router, navigasyon yaşam döngüsünü izlemek için abone olabileceğiniz navigasyon olayları yayınlar. Bu olaylar Router.events observable'ı aracılığıyla kullanılabilir. Bu bölüm, navigasyon ve hata izleme için yaygın yönlendirme yaşam döngüsü olaylarını (kronolojik sırayla) kapsar.

Yaygın hata olayları şunlardır:

Tüm yaşam döngüsü olaylarının listesi için bu kılavuzun tam tablosuna göz atın.

Router olaylarına nasıl abone olunur

Belirli navigasyon yaşam döngüsü olayları sırasında kod çalıştırmak istediğinizde, router.events'e abone olarak ve olayın örneğini kontrol ederek bunu yapabilirsiniz:

// Router olaylarına abone olma örneği
import {Component, inject, signal, effect} from '@angular/core';
import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router';

@Component({
  /*...*/
})
export class RouterEvents {
  private readonly router = inject(Router);

  constructor() {
    // Router olaylarına abone ol ve olaylara tepki ver
    this.router.events.pipe(takeUntilDestroyed()).subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // Navigasyon başlıyor
        console.log('Navigation starting:', event.url);
      }
      if (event instanceof NavigationEnd) {
        // Navigasyon tamamlandı
        console.log('Navigation completed:', event.url);
      }
    });
  }
}

Yönlendirme olayları nasıl hata ayıklanır

Yönlendirici navigasyon sorunlarını olay dizisi hakkında görünürlük olmadan hata ayıklamak zor olabilir. Angular, tüm yönlendirici olaylarını konsola kaydeden yerleşik bir hata ayıklama özelliği sağlar ve navigasyon akışını anlamanıza ve sorunların nerede oluştuğunu belirlemenize yardımcı olur.

Bir Yönlendirici olay dizisini incelemeniz gerektiğinde, dahili navigasyon olayları için günlüğü etkinleştirebilirsiniz. Bunu, tüm yönlendirme olaylarının ayrıntılı konsol günlüğünü etkinleştiren bir yapılandırma seçeneği (withDebugTracing()) geçirerek yapılandırabilirsiniz.

import {provideRouter, withDebugTracing} from '@angular/router';

const appRoutes: Routes = [];
bootstrapApplication(App, {
  providers: [provideRouter(appRoutes, withDebugTracing())],
});

Daha fazla bilgi için withDebugTracing resmi dokümanlarına göz atın.

Yaygın kullanım durumları

Router olayları, gerçek dünya uygulamalarında birçok pratik özelliği mümkün kılar. Router olaylarıyla kullanılan bazı yaygın kalıplar şunlardır.

Yükleme göstergeleri

Navigasyon sırasında yükleme göstergeleri gösterme:

import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    @if (isNavigating()) {
      <div class="loading-bar">Loading...</div>
    }
    <router-outlet />
  `,
})
export class App {
  private router = inject(Router);
  isNavigating = computed(() => !!this.router.currentNavigation());
}

Analitik izleme

Analitik için sayfa görüntülemelerini izleme:

import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {inject, DestroyRef, Service} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';

@Service()
export class AnalyticsService {
  private router = inject(Router);
  private destroyRef = inject(DestroyRef);

  startTracking() {
    this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
      // URL değiştiğinde sayfa görüntülemelerini izle
      if (event instanceof NavigationEnd) {
        // Sayfa görüntülemesini analitik servisine gönder
        this.analytics.trackPageView(event.url);
      }
    });
  }

  private analytics = {
    trackPageView: (url: string) => {
      console.log('Page view tracked:', url);
    },
  };
}

Hata yönetimi

Navigasyon hatalarını nazikçe yönetme ve kullanıcı geri bildirimi sağlama:

import {Component, inject, signal} from '@angular/core';
import {
  Router,
  NavigationStart,
  NavigationError,
  NavigationCancel,
  NavigationCancellationCode,
} from '@angular/router';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-error-handler',
  template: `
    @if (errorMessage()) {
      <div class="error-banner">
        {{ errorMessage() }}
        <button (click)="dismissError()">Dismiss</button>
      </div>
    }
  `,
})
export class ErrorHandler {
  private router = inject(Router);
  readonly errorMessage = signal('');

  constructor() {
    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
      if (event instanceof NavigationStart) {
        this.errorMessage.set('');
      } else if (event instanceof NavigationError) {
        console.error('Navigation error:', event.error);
        this.errorMessage.set('Failed to load page. Please try again.');
      } else if (event instanceof NavigationCancel) {
        console.warn('Navigation cancelled:', event.reason);
        if (event.code === NavigationCancellationCode.GuardRejected) {
          this.errorMessage.set('Access denied. Please check your permissions.');
        }
      }
    });
  }

  dismissError() {
    this.errorMessage.set('');
  }
}

Tüm router olayları

Referans olarak, Angular'da bulunan tüm router olaylarının tam listesi burada verilmiştir. Bu olaylar kategoriye göre düzenlenmiş ve navigasyon sırasında tipik olarak oluşma sırasına göre listelenmiştir.

Navigation events

Bu olaylar, başlangıçtan rota tanıma, koruyucu kontrolleri ve veri çözümlemeye kadar temel navigasyon sürecini izler. Navigasyon yaşam döngüsünün her aşamasına görünürlük sağlar.

Activation events

Bu olaylar, rota bileşenlerinin oluşturulup başlatıldığı etkinleştirme aşamasında gerçekleşir. Etkinleştirme olayları, üst ve alt rotalar dahil olmak üzere rota ağacındaki her rota için tetiklenir.

Navigation completion events

Bu olaylar, bir navigasyon girişiminin nihai sonucunu temsil eder. Her navigasyon, başarılı olup olmadığını, iptal edilip edilmediğini, başarısız olup olmadığını veya atlanıp atlanmadığını gösteren bu olaylardan tam olarak biriyle sona erer.

Other events

Ana navigasyon yaşam döngüsünün dışında gerçekleşen ancak yönlendiricinin olay sisteminin bir parçası olan ek bir olay daha vardır.

Next steps

Rota koruyucuları ve yaygın yönlendirici görevleri hakkında daha fazla bilgi edinin.