روتر پیشرفته (Router Advanced)

«روتر پیشرفته» یعنی مسیریابی حرفه ای در انگولار. اینجا با «نگهبان تابعی (Functional Guard)» آشنا می شوی. همچنین با «خروجی کمکی (Aux Outlet)» چند نما را همزمان می بینی. در پایان، «پیش بارگذاری (Preloading)» را برای سرعت بهتر می بینی.

اصول روتر پیشرفته

نگهبان های تابعی با inject() سرویس ها را می گیرند. سپس می توانند یک UrlTree برگردانند و ریدایرکت کنند. همچنین خروجی های نام دار چند نما را همزمان رندر می کنند.

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

function canActivate() {
  const router = inject(Router);
  const allowed = true;
  if (allowed) {
    return true;
  }
  return 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));

مشاهده در ادیتور

نگهبان های تابعی با inject()

نگهبان تابعی یک تابع ساده است. بنابراین سریع و خوانا می ماند. همین تابع با inject() به روتر دسترسی می گیرد.

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

const isLoggedIn = signal(false);

function canActivate() {
  const router = inject(Router);
  if (isLoggedIn()) {
    return true;
  }
  return 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)] });

مشاهده در ادیتور

خروجی کمکی و تصمیم گیری مسیر

خروجی کمکی نمای دوم را رندر می کند. سپس با نگهبان های دیگر مثل CanDeactivate و CanMatch تصمیم های مسیر را می گیری.

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

const canDeactivate: CanDeactivateFn<any> = (
  component,
  curr,
  currState,
  nextState,
) => {
  return confirm('Leave this page?');
};

const canMatch: CanMatchFn = (route, segments) => {
  return segments[0]?.path === 'secret';
};

مشاهده در ادیتور

پیش بارگذاری و داده مسیر

پیش بارگذاری ماژول ها، مسیریابی بعدی را تندتر می کند. همچنین data برای برچسب ها و فلگ ها عالی است.

import { provideRouter } from '@angular/router';
import { withPreloading } from '@angular/router';
import { PreloadAllModules } from '@angular/router';

provideRouter(routes, withPreloading(PreloadAllModules));

const featureRoute = {
  path: 'feature',
  loadComponent: () => import('./feature').then((m) => m.Feature),
  data: { title: 'Feature' },
};

مشاهده در ادیتور

گام های عملی

1. نگهبان تابعی بساز و inject استفاده کن.
2. در صورت رد، UrlTree برگردان.
3. خروجی نام دار تعریف کن و رندر بگیر.
4. پیش بارگذاری را برای مسیرهای تنبل فعال کن.
5. برچسب ها را در data نگه داری کن.

نکته: نگهبان ها را سریع نگه دار. بنابراین منطق سنگین را به سرویس بده.

جمع بندی سریع

• inject در نگهبان ها ساده و امن است.
• UrlTree بهترین راه ریدایرکت است.
• Aux Outlet چند نما را همزمان می دهد.
• Preloading ناوبری بعدی را سریع می کند.
• data متادیتای مسیر را نگه می دارد.

صفحات مرتبط: تزریق وابستگی پیشرفته، کامپوننت های پویا، و اینترسپتورهای HTTP.