Навигация по маршрутам

Директива RouterLink — это декларативный подход Angular к навигации. Она позволяет использовать стандартные элементы ссылок (<a>), которые бесшовно интегрируются с системой маршрутизации Angular.

Как использовать RouterLink

Вместо обычных элементов ссылок <a> с атрибутом href добавьте директиву RouterLink с соответствующим путём, чтобы использовать маршрутизацию Angular.

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

@Component({
  template: `
    <nav>
      <a routerLink="/user-profile">User profile</a>
      <a routerLink="/settings">Settings</a>
    </nav>
  `,
  imports: [RouterLink],
  ...
})
export class App {}

Использование абсолютных или относительных ссылок

Относительные URL-адреса в маршрутизации Angular позволяют задавать пути навигации относительно расположения текущего маршрута. Это отличается от абсолютных URL-адресов, которые содержат полный путь с протоколом (например, http://) и корневым доменом (например, google.com).

<!-- Absolute URL -->
<a href="https://www.angular.dev/essentials">Angular Essentials Guide</a>

<!-- Relative URL -->
<a href="/essentials">Angular Essentials Guide</a>

В этом примере первый вариант содержит полный путь с протоколом (то есть https://) и корневым доменом (то есть angular.dev), явно заданными для страницы essentials. В отличие от него, второй вариант предполагает, что пользователь уже находится в правильном корневом домене для /essentials.

Как правило, предпочтительнее использовать относительные URL-адреса: их проще сопровождать в разных приложениях, поскольку им не нужно знать своё абсолютное положение в иерархии маршрутизации.

Как работают относительные URL-адреса

В маршрутизации Angular есть два способа задать относительные URL-адреса: строки и массивы.

<!-- Navigates user to /dashboard -->
<a routerLink="dashboard">Dashboard</a>
<a [routerLink]="['dashboard']">Dashboard</a>

Если в относительном URL-адресе нужно задать динамические параметры, используйте синтаксис массива:

<a [routerLink]="['user', currentUserId]">Current User</a>

Кроме того, в маршрутизации Angular можно указать, должен ли путь отсчитываться от текущего URL-адреса или от корневого домена. Это определяется наличием косой черты (/) в начале относительного пути.

Например, если пользователь находится на example.com/settings, относительные пути для разных сценариев можно задать следующим образом:

<!-- Navigates to /settings/notifications -->
<a routerLink="notifications">Notifications</a>
<a routerLink="/settings/notifications">Notifications</a>

<!-- Navigates to /team/:teamId/user/:userId -->
<a routerLink="/team/123/user/456">User 456</a>
<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>

Программная навигация по маршрутам

В то время как RouterLink обеспечивает декларативную навигацию в шаблонах, Angular также предоставляет программную навигацию для ситуаций, когда переход требуется выполнить на основе логики, действий пользователя или состояния приложения. Внедрив Router, вы сможете динамически переходить к маршрутам, передавать параметры и управлять поведением навигации в коде TypeScript.

router.navigate()

Для программного перехода между маршрутами можно использовать метод router.navigate(), указав массив путей URL.

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

@Component({
  selector: 'app-dashboard',
  template: ` <button (click)="navigateToProfile()">View Profile</button> `,
})
export class AppDashboard {
  private router = inject(Router);

  navigateToProfile() {
    // Standard navigation
    this.router.navigate(['/profile']);

    // With route parameters
    this.router.navigate(['/users', userId]);

    // With query parameters
    this.router.navigate(['/search'], {
      queryParams: {category: 'books', sort: 'price'},
    });

    // With matrix parameters
    this.router.navigate(['/products', {featured: true, onSale: true}]);
  }
}

router.navigate() поддерживает как простые, так и сложные сценарии маршрутизации, позволяя передавать параметры маршрута, параметры запроса и управлять поведением навигации.

Также можно создавать динамические пути навигации относительно расположения компонента в дереве маршрутизации с помощью параметра relativeTo.

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

@Component({
  selector: 'app-user-detail',
  template: `
    <button (click)="navigateToEdit()">Edit User</button>
    <button (click)="navigateToParent()">Back to List</button>
  `,
})
export class UserDetail {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  // Navigate to a sibling route
  navigateToEdit() {
    // From: /users/123
    // To:   /users/123/edit
    this.router.navigate(['edit'], {relativeTo: this.route});
  }

  // Navigate to parent
  navigateToParent() {
    // From: /users/123
    // To:   /users
    this.router.navigate(['..'], {relativeTo: this.route});
  }

  navigateToList() {
    // Angular resolves the commands array as a single navigation path relative to the current route.
    // From: /users/123
    // Result: /users/list
    this.router.navigate(['..', 'list'], {relativeTo: this.route});
  }
}

При переходе на несколько уровней вверх все сегменты .. должны находиться в первом элементе массива команд. Маршрутизатор разбирает .. только из первой строки команды — последующие элементы массива рассматриваются как буквальные сегменты пути.

// From: /team/123/users/456
// Result: /team/123/settings
this.router.navigate(['../../settings'], {relativeTo: this.route});

При использовании relativeTo не добавляйте / в начало первой команды. Начальная / делает навигацию абсолютной, полностью игнорируя relativeTo.

// From: /team/123/users/456
// Result: /team/123/users/456/edit
this.router.navigate(['edit'], {relativeTo: this.route});

// From: /team/123/users/456
// Leading '/' causes absolute navigation — relativeTo is ignored
// Result: /edit
this.router.navigate(['/edit'], {relativeTo: this.route});

router.navigateByUrl()

Метод router.navigateByUrl() позволяет выполнять программную навигацию напрямую, используя строки путей URL вместо сегментов массива. Этот метод удобен, когда у вас есть полный путь URL и требуется выполнить абсолютную навигацию, особенно при работе с URL-адресами, полученными извне, или в сценариях глубокого связывания.

// Standard route navigation
router.navigateByUrl('/products');

// Navigate to nested route
router.navigateByUrl('/products/featured');

// Complete URL with parameters and fragment
router.navigateByUrl('/products/123?view=details#reviews');

// Navigate with query parameters
router.navigateByUrl('/search?category=books&sortBy=price');

// With matrix parameters
router.navigateByUrl('/sales-awesome;isOffer=true;showModal=false');

Если нужно заменить текущий URL-адрес в истории браузера, метод navigateByUrl также принимает объект конфигурации с параметром replaceUrl.

// Replace current URL in history
router.navigateByUrl('/checkout', {
  replaceUrl: true,
});

Отображение другого URL-адреса в адресной строке

Можно передать параметр browserUrl в navigateByUrl, чтобы в адресной строке браузера отображался URL-адрес, отличный от используемого для сопоставления маршрута.

Это полезно, если нужно перенаправить пользователя на другой маршрут — например, на страницу ошибки, — не меняя URL-адрес, который пользователь изначально пытался открыть.

router.navigateByUrl('/not-found', {browserUrl: '/products/missing-item'});

Angular переходит на маршрут /not-found и отображает его, но в адресной строке браузера показывается /products/missing-item.

Настройка URL-адреса браузера с помощью RouterLink

Директива RouterLink также поддерживает входной параметр browserUrl, позволяющий управлять URL-адресом, отображаемым в адресной строке браузера при нажатии ссылки, независимо от маршрута, на который переходит Angular.

<!-- Navigates to /dashboard, but the address bar shows /home -->
<a [routerLink]="['/dashboard']" [browserUrl]="'/home'">Go to Dashboard</a>

Для более динамичных сценариев можно также привязать UrlTree:

import {Component, inject} from '@angular/core';
import {Router, RouterLink, UrlTree} from '@angular/router';

@Component({
  template: `
    <a [routerLink]="['/products', product.id]" [browserUrl]="displayUrl">
      {{ product.name }}
    </a>
  `,
  imports: [RouterLink],
})
export class ProductList {
  private router = inject(Router);

  product = {id: 42, name: 'Widget'};

  // Create a UrlTree to display in the address bar
  displayUrl: UrlTree = this.router.createUrlTree(['/products', 'widget']);
}

Дальнейшие шаги

Узнайте, как читать состояние маршрута, чтобы создавать отзывчивые компоненты, учитывающие контекст.