Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl

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

Разберёмся, как работают RouterLink, Router.navigate и Router.navigateByUrl.

Использование RouterLink

Вот как выглядит обычная HTML-ссылка:

<a href="/example">
  Пример HTML-ссылки.
</a>

Такая ссылка просто отправит пользователя по адресу /example.

Но в одностраничных приложениях (SPA) нет отдельных HTML-страниц — есть только разные представления, которые переключаются внутри одного приложения. Чтобы переключать такие представления, используют RouterLink вместо обычного href:

<a routerLink="/users/sammy">
  Ссылка с маршрутом в виде строки.
</a>

В этом примере пользователь перейдёт к компоненту по маршруту /users/sammy.

Маршрут можно задать и массивом сегментов:

<a [routerLink]="['/', 'users', 'sammy']">
  Ссылка с маршрутом в виде массива.
</a>

Формат записи отличается, но в целом варианта приведут на одну и ту же страницу.

Относительные пути

Можно использовать ../, чтобы подняться на уровень выше по маршруту.

<a [routerLink]="['../', 'posts', 'sammy']">
  Ссылка на уровень выше.
</a>

Если текущий маршрут — /users/sammy, то такой переход приведёт к /posts/sammy.

Angular также поддерживает относительные пути с ./, ../ или без ведущего символа вовсе.

Передача параметров

Через RouterLink можно передавать параметры в маршруты, указав объект в массиве сегментов:

<a [routerLink]="['/', 'users', { display: 'verbose' }, 'sammy']">
  Ссылка с параметром.
</a>

В результате Angular сформирует маршрут /users;display=verbose/sammy.

Именованные аутлеты

Можно указать, в какой именованный outlet должен загрузиться компонент:

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'] } }]">
  Ссылка с дополнительным outlet.
</a>

В этом случае сегмент sammy загрузится в outlet с именем side.

Также можно использовать сразу несколько именованных outlet:

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]">
  Ссылка с двумя outlet'ами: side и footer.
</a>

Тут sammy окажется в outlet side, а sharks — в footer.

Использование Router

В Angular можно управлять маршрутизацией программно — через методы Router.navigate и Router.navigateByUrl. Оба метода возвращают Promise:

• true — переход выполнен успешно;
• false — переход не удался;
• null — переход не выполнен, потому что некуда;

Импорт и внедрение Router

Для начала импортируем Router:

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

Затем внедряем Router в компонент через конструктор:

@Component({
  // ...
})
export class AppComponent {
  constructor(private router: Router) {
    // ...
  }
}

Теперь можно использовать Router.navigate и Router.navigateByUrl.

Метод Router.navigate

Метод navigate принимает массив сегментов маршрута. Пример простого перехода:

goPlaces() {
  this.router.navigate(['/', 'users']);
}

Метод возвращает Promise, поэтому можно использовать .then():

goPlaces() {
  this.router.navigate(['/', 'users'])
    .then(nav => {
      console.log(nav); // true — если переход успешен
    }, err => {
      console.log(err); // в случае ошибки
    });
}

Метод Router.navigateByUrl

navigateByUrl похож на navigate, но принимает строку вместо массива. Путь должен быть абсолютным и начинаться с /.

Пример:

goPlaces() {
  this.router.navigateByUrl('/users;display=verbose/sammy');
}

В этом случае произойдёт переход по маршруту /users;display=verbose/sammy.

Заключение

В этой статье мы разобрали три способа навигации в Angular:

• декларативный с RouterLink;
• программный с Router.navigate;
• строковый с Router.navigateByUrl.

Если хотите изучить тему глубже, загляните в документацию Angular — там есть много упражнений и практических проектов.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.