Навигация по маршрутам с помощью Angular

Эта статья является справочником по основным понятиям навигации по маршрутам с помощью Angular. Он включает введение в концепции, а также примеры и соответствующие ссылки на документацию.

Покрываемая версия Angular: версия 8.

Документация Angular отлично подходит для большей части этого, поэтому здесь она не повторяется. Предоставляется общее введение в каждую концепцию, а также любая информация, которую трудно найти.

Введение

Angular предоставляет два варианта активации маршрута. Внутри шаблонов routerLink а также routerLinkActive используются атрибуты. Внутри компонентов класс Router предоставляет navigate а также navigateByUrl.

Атрибут «routerLink»

Внутри шаблона routerLink атрибут можно использовать для любого элемента. Это делает этот элемент кликабельным, чтобы активировать указанный маршрут. Это часть МаршрутизаторМодулькоторый экспортируется вашим приложением конфигурация маршрутизатора, делая его доступным во всем приложении. Его можно использовать по аналогии с href в ссылках или путем передачи массива сегментов пути.

Лучшее место, чтобы узнать больше, это описание из документации API.

routerLink атрибут предоставляется Директива RouterLinkWithHref (за <a> или же <area>) и Директива RouterLink (для всего остального). Отличие заключается в поддержке href а также target атрибуты.

Соответствующая документация

Примеры

<div routerLink="/crisis-center">Crisis Center</div>

<a routerLink="['/team', teamId, 'user', userName, {details: true}]">Heroes</a>

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

<a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment>
  link to user component
</a>

Атрибут «routerLinkActive»

Чтобы стилизовать ссылки маршрутизатора на текущий активный маршрут, routerLinkActive предоставляется атрибут. Он принимает одно или несколько имен классов, которые будут переключаться на элемент, когда его routerLink указывает на активный маршрут. Родительские маршруты будут отображаться как активные для дочерних маршрутов. Это поведение можно отключить с помощью routerLinkActiveOptions и настройка {exact: true}.

Лучшее место, чтобы узнать больше, это описание из документации API.

routerLinkActive атрибут предоставляется Директива RouterLinkActive. Он доступен в вашем приложении так же, как routerLink.

Соответствующая документация

Примеры

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>

<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

Класс маршрутизатора

Класс маршрутизатора предоставляет два метода для активации нового маршрута — ориентироваться а также Навигация по URL.

navigateByUrl метод используется для активации маршрута на основе массива команд. navigateByUrl метод используется для активации маршрута на основе URL-адреса в виде строки или URL-дерево. В обоих случаях можно использовать второй аргумент для указания НавигацияДополнительно.

Соответствующая документация

Примеры

router.navigate(['team', 33, 'user', 11]);

router.navigate(['team', 33, 'user', 11], { skipLocationChange: true });

router.navigateByUrl("/team/33/user/11");

router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });