Angular Academy · Ders

Çözümleyiciler ve Rota Verileri

Bir rotayı etkinleştirmeden önce verileri önceden yükleyin

Çözümleyiciler ve Rota Verileri, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Çözümleyici nedir

Çözümleyici, bir yol etkinleşmeden önce verileri önceden getirir. Böylece bileşen, veriler zaten hazır durumdayken oluşturulur ve bileşenin kendisinde yükleniyor görüntüsü oluşmaz.

Statik yol verileri

data özelliği, statik değerleri bir yola bağlar; bu değerlere ActivatedRoute.data üzerinden erişilebilir.

export const routes = [
  { path: 'admin', component: AdminComponent,
    data: { title: 'Admin Panel', roles: ['admin'] } }
];

Yol verilerini okuma

route.data, birleştirilmiş veri nesnesini yayınlayan bir gözlemlenebilirdir.

route.data.subscribe(d => {
  console.log(d['title']); // Admin Panel
});

İşlevsel çözümleyici: ResolveFn

Modern Angular, verileri (veya verilerin gözlemlenebilirini ya da vaadini) döndüren basit bir işlev olan ResolveFn kullanır.

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const userResolver = (route) => {
  const http = inject(HttpClient);
  return http.get('/api/user/' + route.paramMap.get('id'));
};

Çözümleyiciyi bir yola bağlama

Çözümleyicileri resolve anahtarının altına ekleyin. Sonuç, ilgili anahtar altında route.data içine yerleşir.

export const routes = [
  { path: 'user/:id', component: UserComponent,
    resolve: { user: userResolver } }
];

Çözümlemesi yapılmış verileri kullanma

Çözümlemesi yapılmış değeri, anahtarını kullanarak route.data içinden okuyun.

route.data.subscribe(d => {
  this.user = d['user']; // already loaded
});

Giriş bağlama üzerinden çözümlemesi yapılmış veriler

withComponentInputBinding() ile çözümlemesi yapılmış anahtarlar, eşleşen bileşen girişlerine otomatik olarak bağlanır.

export class UserComponent {
  @Input() user!: User; // from resolve: { user: ... }
}

Çözümleyiciler ve gezinme zamanlaması

Yönlendirici, yolu etkinleştirmeden önce çözümleyici gözlemlenebilirinin tamamlanmasını (veya vaadin sonuçlanmasını) bekler. Hiç tamamlanmayan bir çözümleyici gezinmeyi engeller.

Çözümleyici hatalarını ele alma

Bir çözümleyici hata verirse gezinme iptal edilir. Yönlendirme yapmak veya geri dönüş değeri döndürmek için hataları çözümleyicinin içinde yakalayın.

export const userResolver = (route) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  return http.get('/api/user/' + route.paramMap.get('id')).pipe(
    catchError(() => { router.navigate(['/404']); return EMPTY; })
  );
};

Çözümleyiciler ne zaman kullanılmalı

Sayfa görüntülenmeden önce mutlaka hazır olması gereken veriler için çözümleyici kullanın. Aşamalı olarak yüklenebilecek veriler için bileşende yükleme yapmak (yükleniyor durumuyla) çoğu zaman daha iyi bir kullanıcı deneyimidir. Yavaş ve isteğe bağlı veriler yüzünden gezinmeyi engellemeyin.

Başlık stratejisi

Yönlendiricide belge başlığını ayarlamak için yerleşik bir title yol özelliği ve TitleStrategy bulunur; bunlar çoğu zaman çözümlemesi yapılmış verilerle birlikte kullanılır.

export const routes = [
  { path: 'about', component: AboutComponent, title: 'About Us' }
];

Kısa Kontrol

Çözümleyicileri ne kadar anladığınızı test edin.

Özet: Çözümleyiciler ve Yol Verileri

Çözümleyiciler, etkinleştirmeden önce verileri önceden yükler.

data: Statik yol değerleri.
ResolveFn + resolve: Dinamik verileri önceden route.data içine yükler.
Yönlendirici tamamlanmayı bekler; gezinmenin engellenmesini önlemek için hataları ele alın.

Sırada: işlevsel yol korumaları.

Sıkça Sorulan Sorular

“Çözümleyiciler ve Rota Verileri” dersi ücretsiz mi?

Evet — “Çözümleyiciler ve Rota Verileri” 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.

“Çözümleyiciler ve Rota Verileri” dersinde ne öğreneceğim?

Bir rotayı etkinleştirmeden önce verileri önceden yükleyin 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 2. dersidir.

“Çözümleyiciler ve Rota Verileri” 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