Angular Router: навигация с использованием RouterLink, Navigate или NavigateByUrl

Введение

В Angular RouterLink — это директива для навигации по другому маршруту декларативно. Router.navigate и Router.navigateByURL — это два метода, доступные классу Router для императивной навигации по классам компонентов. .

Давайте рассмотрим, как использовать RouterLink, Router.navigate и Router.navigateByURL.

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

Типичная ссылка в HTML выглядит так:

<a href="/example">
  Example HTML link.
</a>

Эта примерная ссылка направит пользователя на страницу /example.

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

<a routerLink="/users/sammy">
  Link that uses a string.
</a>

Этот пример RouterLink направит пользователя к компоненту в /users/sammy.

Различные сегменты URL также могут быть переданы в массиве следующим образом:

<a [routerLink]="['/', 'users', 'sammy']">
  Link that uses an array.
</a>

Эти два примера имеют разный формат, но будут направлены на один и тот же компонент в /users/sammy.

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

Вы можете использовать ../ для перехода на более высокие уровни навигации, используя что-то вроде этого:

<a [routerLink]="['../', 'posts', 'sammy']">
  Link that goes up a level.
</a>

В этом примере, если пользователь находится по адресу /users/sammy, навигация изменится на /posts/sammy.

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

Параметры

Вы можете передать параметры навигации с объектом в списке сегментов URL:

<a [routerLink]="['/', 'users', {display: 'verbose'}, 'sammy']">
  Link with parameter.
</a>

В этом примере Маршрутизатор перейдет к /users;display=verbose/sammy.

Именованные розетки

Вы можете указать маршрутизатору, что поместить в именованный outlet, примерно так:

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'] } }]">
  Link with a side outlet.
</a>

В этом примере сегмент sammy будет помещен в outlet с именем side. .

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

<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]">
  Link with a side and footer outlets.
</a>

В этом примере сегмент sammy будет помещен в outlet с именем side. а сегмент акулы будет помещен в outlet с именем footer.

Использование маршрутизатора

В классе Router Angular доступны два метода для императивной навигации в классах компонентов: Router.navigate и Router.navigateByUrl. Оба метода возвращают обещание, которое принимает значение true, если навигация прошла успешно, null, если навигации нет, false, если навигация не удалась или полностью отклонено, если есть ошибка.

Чтобы использовать любой метод, сначала нужно убедиться, что класс 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

Вы передаете массив сегментов URL в Router.navigate.

Вот простой пример использования метода Router.navigate:

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

А вот пример, демонстрирующий, как Router.navigate затем:

goPlaces() {
  this.router.navigate(['/', 'users'])
    .then(nav => {
      console.log(nav); // true if navigation is successful
    }, err => {
      console.log(err) // when there's an error
    });
}

Если в этом примере Router.navigate выполнено успешно, будет отображаться true. Если в этом примере Router.navigate выполнить не удалось, появится сообщение об ошибке.

Router.navigateByUrl

Router.navigateByUrl похож на Router.navigate, за исключением того, что вместо сегментов URL передается строка. Навигация должна быть абсолютной и начинаться с /.

Вот простой пример использования метода Router.navigateByUrl:

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

В этом примере Router.navigateByUrl перейдет к /users;display=verbose/sammy.

Заключение

В этой статье вы узнали о навигации в приложениях Angular. Вы познакомились с RouterLink, Router.navigate и Router.navigateByURL.

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