Маршрутизация и навигация

Маршрутизатор Angular позволяет переходить от одного представления к другому по мере выполнения пользователями задач приложения.

Обзор

Браузер представляет собой знакомую модель навигации по приложению:

  • Введите URL-адрес в адресной строке, и браузер перейдет на соответствующую страницу.
  • Щелкните ссылки на странице, и браузер перейдет на новую страницу.
  • Нажмите кнопки браузера «Назад» и «Вперед», и браузер будет перемещаться вперед и назад по истории просмотренных вами страниц.

Angular Router («маршрутизатор») заимствован из этой модели. Он может интерпретировать URL-адрес браузера как инструкцию для перехода к просмотру, созданному клиентом. Он может передавать необязательные параметры вспомогательному компоненту представления, которые помогают ему решить, какой конкретный контент представить.

Основы

     

Большинство приложений маршрутизации должны добавлять элемент в index.html в качестве первого дочернего элемента в теге

, чтобы сообщить роутер, как составлять URL-адреса для навигации.

Если папка приложения является корнем приложения, как в примере приложения, установите значение href точно так, как показано здесь.

    

Импорт маршрутизатора

Угловой маршрутизатор — это дополнительная служба, которая представляет конкретное представление компонента для данного URL-адреса. Он не является частью ядра Angular. Он находится в собственном библиотечном пакете @ angular/router. Импортируйте из него все, что вам нужно, как и из любого другого пакета Angular.

  import {RouterModule, Routes} from '@ angular/router';  

Конфигурация

Маршрутизируемое приложение Angular имеет один одноэлементный экземпляр службы маршрутизатора. Когда URL-адрес браузера изменяется, этот маршрутизатор ищет соответствующий Маршрут, из которого он может определить компонент для отображения.

Маршрутизатор не имеет маршрутов, пока вы его не настроите.

Выход маршрутизатора

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

     

Ссылки маршрутизатора

Теперь у вас есть настроенные маршруты и место для их отображения, но как вы перемещаетесь? URL-адрес может поступать прямо из адресной строки браузера. Но большую часть времени вы перемещаетесь в результате некоторых действий пользователя, таких как щелчок по тегу привязки.

Директивы RouterLink в тегах привязки дают маршрутизатору контроль над этими элементами. Пути навигации фиксированы, поэтому вы можете назначить строку для routerLink («одноразовая» привязка).

Если бы путь навигации был более динамичным, вы могли бы привязать к выражению шаблона который вернул массив параметров ссылки маршрута (массив параметров ссылки). Маршрутизатор преобразует этот массив в полный URL.

Активные ссылки маршрутизатора

Директива RouterLinkActive переключает классы CSS для активных привязок RouterLink на основе текущего состояния RouterState.

В каждом теге привязки вы видите привязку свойства к директиве RouterLinkActive, которая выглядит как routerLinkActive = «…».

Выражение шаблона справа от равенства (=) содержит разделенную пробелами строку классов CSS, которые Маршрутизатор добавит, когда эта ссылка активна (и удалит, когда ссылка неактивна). Вы устанавливаете директиву RouterLinkActive для строки классов, таких как [routerLinkActive] = «‘active fluffy'», или привязываете ее к свойству компонента, которое возвращает такую ​​строку.

Router state

После завершения каждого успешного жизненного цикла навигации маршрутизатор строит дерево объектов ActivatedRoute, которые составляют текущее состояние маршрутизатора. Вы можете получить доступ к текущему RouterState из любого места в приложении, используя службу Router и свойство routerState.

Оцените статью
nanomode.ru
Добавить комментарий