Angular kengaytirilgan Router

Kengaytirilgan marshrutlash inject(), bir nechta ko‘rinishlar uchun yordamchi socket va oldindan yuklash strategiyalari bilan funktsional himoya vositalarini/resolverlarni qamrab oladi; qayta yo‘naltirish uchun UrlTree-ni qaytaring.

Routerning ilg‘or asoslari

Funktsional himoyalar/rezolyutsiyalar: Turi xavfsiz navigatsiya uchun inject() bilan funksiyalardan foydalaning.
Yordamchi socket: Nomlangan RouterOutlets bir nechta ko‘rinishlarni beradi (masalan, /inbox(compose:modal)).
Oldindan yuklash va ma’lumotlar: navigatsiyani optimallashtirish uchun statik bayroqlar va oldindan yuklash strategiyalari uchun data dan foydalaning.

import { inject } from '@angular/core';
import { Router, Routes, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';

function canActivate() {
  const router = inject(Router);
  return /* condition */ true || router.createUrlTree(['/']);
}

const routes: Routes = [
  { path: 'feature', loadComponent: () => import('./feature').then(m => m.Feature), data: { title: 'Feature' }, canActivate: [canActivate] },
  { path: 'inbox', loadComponent: () => import('./inbox').then(m => m.Inbox) },
  { path: 'compose', outlet: 'modal', loadComponent: () => import('./compose').then(m => m.Compose) }
];

provideRouter(routes, withPreloading(PreloadAllModules));

Kod tushuntirildi

inject(Router): Routerga qo‘riqlash funksiyasi ichidagi kirish imkonini beradi.
UrlTree yo‘nalishi: Imperativ navigatsiya o‘rniga yo‘naltirish uchun router.createUrlTree(['/']) ni qaytaring.
Aux outlet: outlet: 'modal' ko‘rsatilgan marshrut nomlangan RouterOutlet’ga yo‘naltiriladi.

Eslatmalar:

Tegishli: Router, Xizmatlar va App Bootstrap-ga qarang.
inject() bilan funksional guardlardan foydalaning.
Guard turlari: canActivate, canDeactivate, canMatch (marshrut konfiguratsiyasi mos kelish-kelmasligini hal qiladi), canLoad (lazy kontent yuklanishini bloklaydi).
Qayta yo‘naltirishlar uchun UrlTree-ni qaytaring.

import { CanDeactivateFn, CanMatchFn } from '@angular/router';

// canDeactivate: confirm navigation away
const canDeactivate: CanDeactivateFn<any> = (component, curr, currState, nextState) => confirm('Leave this page?');

// canMatch: decide if a route config should match current URL
const canMatch: CanMatchFn = (route, segments) => segments[0]?.path === 'secret';

Kod tushuntirildi

CanDeactivateFn: Navigatsiyaga ruxsat berilganligini hal qiling (masalan, dialogni tasdiqlash).
CanMatchFn: Marshrut ta’rifi joriy URL segmentlariga mos kelishini hal qiling.

inject() bilan funksional guardlar

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, inject } from '@angular/core';
import { Routes, provideRouter, Router, RouterOutlet } from '@angular/router';

const isLoggedIn = signal(false);

function canActivate() {
  const router = inject(Router);
  return isLoggedIn() || router.createUrlTree(['/']);
}

@Component({ selector: 'home-page', standalone: true, template: `<p>Home</p> <button (click)="login()">Login</button>` })
class Home { login() { isLoggedIn.set(true); } }

@Component({ selector: 'secret-page', standalone: true, template: `<p>Top Secret</p>` })
class Secret {}

const routes: Routes = [
  { path: '', component: Home },
  { path: 'secret', component: Secret, canActivate: [canActivate] }
];

@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], template: `<a [routerLink]="['/']">Home</a> | <a [routerLink]="['/secret']">Secret</a> <router-outlet></router-outlet>` })
class App {}

bootstrapApplication(App, { providers: [provideRouter(routes)] });

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

Funktsional himoya: canActivate() inject(Router) dan foydalanadi va bloklanganda UrlTree-ni qaytaradi.
Signal holati: isLoggedIn signali qo‘riqchining ruxsat berish/rad etish natijasini boshqaradi.
Havolalar + socket: Navigatsiya routerLink dan foydalanadi va <router-outlet> faol marshrutni ko‘rsatadi.

Eslatmalar:

Funksiyalardan foydalaning: sof funksiyalar sifatida soqchilarni yozing va xizmatlarga kirish uchun inject() dan foydalaning.
Qayta yo‘naltirishlar: majburiy navigatsiya o‘rniga UrlTree-ni qaytaring.
Ularni tez tuting: qo‘riqchilarda og‘ir ishlardan qoching; imkon qadar xizmatlarga va keshga topshiring.

Oldindan yuklash va marshrut ma’lumotlari

Statik belgilar (sarlavhalar, ruxsatlar) uchun marshrutning data maydonidan foydalaning.
Lazy yuklash xususiyatlari va navigatsiyani optimallashtirish uchun oldindan yuklashni yoqing.

provideRouter(routes, withPreloading(PreloadAllModules));
// Route with data
{ path: 'feature', loadComponent: () => import('./feature').then(m => m.Feature), data: { title: 'Feature' } }

Kod tushuntirildi

withPreloading(PreloadAllModules): dastlabki yuklanishdan so‘ng lazy marshrutlarni fonda oldindan yuklaydi.
data: Static route data holds metadata like titles/flags for reuse.

Eslatmalar:

Marshrut ma’lumotlari: Komponentlardagi qattiq kodlash ustidan statik bayroqlar (nomlar, ruxsatlar) uchun data dan foydalaning.
Oldindan yuklash: Orqa fonda keyingi ehtimoliy modullarni olish uchun strategiyalardan foydalaning.
O‘lchov: Profil to‘plamining o‘lchamlari va navigatsiya vaqti oldindan yuklashni yoqishdan oldin/keyin.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish