Angular router: маршрутизація, охоронці та ледача завантаження

Angular Router

Angular Router відображає URL шляхи на компоненти, підтримує навігаційні охоронці, лінійне завантаження та вкладені маршрути.

Основна Налаштування

typescript

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', component: NotFoundComponent }, // Дикий символ
];

html

<!-- app.component.html -->
<nav>
  <a routerLink="/" routerLinkActive="active">Головна</a>
  <a routerLink="/about" routerLinkActive="active">Про нас</a>
</nav>

<router-outlet></router-outlet> <!-- Тут відображається вміст маршруту -->

Параметри Маршруту

typescript

import { ActivatedRoute } from '@angular/router';

@Component({ /* ... */ })
export class UserDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);

  ngOnInit() {
    // Снімок (одноразове читання)
    const id = this.route.snapshot.paramMap.get('id');

    // Observable (реагує на зміни параметрів)
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      this.loadUser(id!);
    });
  }
}

Лінійне Завантаження

Завантажуйте модулі функцій за запитом, щоб зменшити початковий пакет:

typescript

export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component')
      .then(m => m.AdminComponent),
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.routes')
      .then(m => m.DASHBOARD_ROUTES),
  },
];

Охоронці Маршрутів

canActivate — Захистити маршрути

typescript

import { CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  }

  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url }
  });
};

// Використання в маршрутах
{ path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] }

canDeactivate — Запобігти виходу

typescript

export const unsavedChangesGuard: CanDeactivateFn<FormComponent> = (component) => {
  if (component.hasUnsavedChanges()) {
    return confirm('У вас є незбережені зміни. Вийти все ж?');
  }
  return true;
};

Розв'язувачі — Попереднє отримання даних

typescript

export const userResolver: ResolveFn<User> = (route) => {
  const userService = inject(UserService);
  const id = route.paramMap.get('id')!;
  return userService.getUserById(id);
};

// Конфігурація маршруту
{
  path: 'users/:id',
  component: UserDetailComponent,
  resolve: { user: userResolver }
}

// У компоненті
export class UserDetailComponent {
  private route = inject(ActivatedRoute);
  user = this.route.snapshot.data['user'] as User;
}

Вкладені Маршрути

typescript

{
  path: 'settings',
  component: SettingsLayoutComponent,
  children: [
    { path: '', redirectTo: 'profile', pathMatch: 'full' },
    { path: 'profile', component: ProfileSettingsComponent },
    { path: 'security', component: SecuritySettingsComponent },
    { path: 'notifications', component: NotificationSettingsComponent },
  ]
}

Angular Router надає декларативну маршрутизацію з охоронцями для контролю доступу та лінійне завантаження для підвищення продуктивності. Використовуйте функціональні охоронці (CanActivateFn) замість охоронців на основі класів. Завжди лінійно завантажуйте функціональні маршрути, використовуючи loadComponent/loadChildren. Використовуйте розв'язувачі для попереднього отримання даних перед навігацією.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань