Diğer Yaygın Yönlendirme Görevleri

Bu kılavuz, uygulamanızda Angular yönlendirici kullanımıyla ilişkili diğer bazı yaygın görevleri kapsar.

Rota bilgisi alma

Genellikle, bir kullanıcı uygulamanızda gezinirken bir bileşenden diğerine bilgi aktarmak istersiniz. Örneğin, market ürünlerinin bir alışveriş listesini görüntüleyen bir uygulama düşünün. Listedeki her öğenin benzersiz bir id'si vardır. Bir öğeyi düzenlemek için kullanıcılar, bir EditGroceryItem bileşeni açan Düzenle düğmesine tıklar. Bu bileşenin, doğru bilgileri kullanıcıya gösterebilmesi için market ürününün id'sini almasını istersiniz.

Bu tür bilgileri uygulama bileşenlerinize aktarmak için bir rota kullanın. Bunu yapmak için, provideRouter ile withComponentInputBinding özelliğini veya RouterModule.forRoot'un bindToComponentInputs seçeneğini kullanırsınız.

Bir rotadan bilgi almak için:

1. Add withComponentInputBinding

   provideRouter yöntemine withComponentInputBinding özelliğini ekleyin.

   providers: [provideRouter(appRoutes, withComponentInputBinding())];

2. Add an input to the component

   Bileşeni, parametre adıyla eşleşen bir input() özelliğine sahip olacak şekilde güncelleyin.

   id = input.required<string>();
   hero = computed(() => this.service.getHero(id()));

3. Optional: Use a default value

   withComponentInputBinding etkinleştirildiğinde yönlendirici, geçerli rotaya göre tüm girişlere değer atar. İsteğe bağlı bir sorgu parametresi eksik olduğunda gibi, giriş anahtarıyla eşleşen rota verisi yoksa yönlendirici undefined atar. Bir girişin rota tarafından eşleştirilmeme olasılığı olduğunda input türüne undefined dahil etmelisiniz.

   Girişte transform seçeneğini kullanarak veya linkedSignal ile yerel bir durum yöneterek varsayılan bir değer sağlayın.

   id = input.required({
     transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
   });
   // veya
   id = input<string | undefined>();
   internalId = linkedSignal(() => this.id() ?? getDefaultId());

Sorgu parametresi bağlamayı devre dışı bırakma

Sorgu parametrelerini ayrı olarak yönetiyorsanız, sorgu parametresi bağlamayı devre dışı bırakmak için ComponentInputBindingOptions kullanın:

provideRouter(appRoutes, withComponentInputBinding({queryParams: false}));

Yönlendirici verisinde bulunmayan girişler için davranışı yapılandırma

Varsayılan olarak, bir gezinme sırasında yönlendirici verisinde bulunmayan bir girişi yönlendirici undefined olarak ayarlar. Bu, eski verilerin tutulmamasını sağlar.

Etkin bileşen örneği için yönlendirici verisinde hiçbir zaman bulunmamış girişlerin undefined olarak ayarlanmasını önlemek istiyorsanız, unmatchedInputBehavior seçeneğini 'undefinedIfStale' olarak ayarlayabilirsiniz:

provideRouter(appRoutes, withComponentInputBinding({unmatchedInputBehavior: 'undefinedIfStale'}));

unmatchedInputBehavior: 'undefinedIfStale' ile queryParams: false seçeneklerini birlikte kullandığınızda, girişler yönlendirici tarafından açıkça sağlanmadıkça başlangıç değerlerini korur. İstisna matris parametreleridir: bir matris parametresi bir gezinmede sağlanıp sonraki bir gezinmede kaldırılırsa, eski verilerin tutulmasını önlemek için yönlendirici girişi undefined olarak ayarlar.

provideRouter(
  appRoutes,
  withComponentInputBinding({
    queryParams: false,
    unmatchedInputBehavior: 'undefinedIfStale',
  }),
);

Üst rota verisini devralma

Varsayılan olarak, alt rotalar üst rotalardan parametreleri ve verileri devralır (paramsInheritanceStrategy: 'always' ile eşdeğerdir). Bu, üst rota bilgilerine doğrudan alt bileşenlerde erişebileceğiniz anlamına gelir.

Parametrelerin yalnızca boş yol rotalarından devralındığı eski davranışı geri yüklemeniz gerekiyorsa, paramsInheritanceStrategy seçeneğini 'emptyOnly' olarak ayarlayabilirsiniz:

provideRouter(routes, withRouterConfig({paramsInheritanceStrategy: 'emptyOnly'}));

Diğer mevcut ayarlar hakkında ayrıntılar için yönlendirici yapılandırma seçeneklerine bakın.

404 sayfası görüntüleme

404 sayfası görüntülemek için, component özelliğini 404 sayfanız için kullanmak istediğiniz bileşene ayarlayarak bir joker rota kurun:

const routes: Routes = [
  {path: 'first-component', component: First},
  {path: 'second-component', component: Second},
  {path: '**', component: PageNotFound}, // 404 sayfası için joker rota
];

** path'ine sahip son rota bir joker rotadır. İstenen URL, listedeki daha önceki yollardan hiçbiriyle eşleşmezse yönlendirici bu rotayı seçer ve kullanıcıyı PageNotFound'a yönlendirir.

Bağlantı parametreleri dizisi

Bir bağlantı parametreleri dizisi, yönlendirici navigasyonu için aşağıdaki bileşenleri içerir:

• Hedef bileşene giden rotanın yolu
• Rota URL'sine giren zorunlu ve isteğe bağlı rota parametreleri

RouterLink direktifini böyle bir diziye şu şekilde bağlayın:

<a [routerLink]="['/heroes']">Heroes</a>

Bir rota parametresi belirtilirken aşağıdaki iki elemanlı bir dizidir:

<a [routerLink]="['/hero', hero.id]">
  <span class="badge">{{ hero.id }}</span
  >{{ hero.name }}
</a>

İsteğe bağlı rota parametrelerini { foo: 'foo' } gibi bir nesnede sağlayın:

<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>

Bu söz dizimi, belirli bir URL segmentiyle ilişkili isteğe bağlı parametreler olan matris parametrelerini aktarır. Matris parametreleri hakkında daha fazla bilgi edinin.

Bu üç örnek, tek seviyeli yönlendirmeye sahip bir uygulamanın ihtiyaçlarını karşılar. Ancak, kriz merkezi gibi bir alt yönlendirici ile yeni bağlantı dizisi olasılıkları oluşturursunuz.

Aşağıdaki minimal RouterLink örneği, kriz merkezi için belirtilen varsayılan alt rota üzerine kuruludur.

<a [routerLink]="['/crisis-center']">Crisis Center</a>

Aşağıdakileri inceleyin:

• Dizideki ilk öğe üst rotayı belirler (/crisis-center)
• Bu üst rota için parametre yoktur
• Alt rota için varsayılan yoktur, bu yüzden bir tane seçmeniz gerekir
• CrisisList'e navigasyon yapıyorsunuz, rota yolu /'dir ama eğik çizgiyi açıkça eklemeniz gerekmez

Uygulamanın kökünden Dragon Crisis'e navigasyon yapan aşağıdaki router bağlantısını inceleyin:

<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>

• Dizideki ilk öğe üst rotayı belirler (/crisis-center)
• Bu üst rota için parametre yoktur
• İkinci öğe, belirli bir kriz hakkında alt rota ayrıntılarını belirler (/:id)
• Ayrıntılar alt rotası bir id rota parametresi gerektirir
• Dragon Crisis'in id'sini diziye ikinci öğe olarak eklediniz (1)
• Sonuç yol /crisis-center/1'dir

App şablonunu yalnızca Kriz Merkezi rotalarıyla da yeniden tanımlayabilirsiniz:

@Component({
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a [routerLink]="['/crisis-center']">Crisis Center</a>
      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
    </nav>
    <router-outlet />
  `,
})
export class App {}

Özetle, bir, iki veya daha fazla yönlendirme derinliğine sahip uygulamalar yazabilirsiniz. Bağlantı parametreleri dizisi, herhangi bir yönlendirme derinliğini ve herhangi bir geçerli rota yolları, (zorunlu) yönlendirici parametreleri ve (isteğe bağlı) rota parametre nesneleri dizisini temsil etme esnekliği sağlar.

LocationStrategy ve tarayıcı URL stilleri

Yönlendirici yeni bir bileşen görünümüne navigasyon yaptığında, tarayıcının konumunu ve geçmişini o görünüm için bir URL ile günceller.

Modern HTML5 tarayıcıları, sunucu sayfa isteği tetiklemeden tarayıcının konumunu ve geçmişini değiştiren bir teknik olan history.pushState'i destekler. Yönlendirici, normalde sayfa yüklemesi gerektirecek olandan ayırt edilemeyen "doğal" bir URL oluşturabilir.

İşte bu "HTML5 pushState" stilinde Kriz Merkezi URL'si:

localhost:3002/crisis-center

Eski tarayıcılar, konum URL'si değiştiğinde sunucuya sayfa isteği gönderir, ancak değişiklik "#" ("hash" olarak adlandırılır)'dan sonra gerçekleşirse bunu yapmaz. Yönlendiriciler, hash'lerle uygulama içi rota URL'leri oluşturarak bu istisnadan yararlanabilir. İşte Kriz Merkezi'ne yönlendiren bir "hash URL".

localhost:3002/src/#/crisis-center

Yönlendirici, iki LocationStrategy sağlayıcısıyla her iki stili destekler:

RouterModule.forRoot() fonksiyonu, LocationStrategy'yi PathLocationStrategy olarak ayarlar ve bu onu varsayılan strateji yapar. Ayrıca başlatma işlemi sırasında bir geçersiz kılma ile HashLocationStrategy'ye geçme seçeneğiniz de vardır.