Маршрутизация и навигация
Угловой маршрутизатор позволяет переходить от одного вида к другому, когда пользователи выполняют задачи приложения.
обзор
Браузер представляет собой привычную модель навигации приложения:
- Введите URL-адрес в адресной строке, и браузер перейдет на соответствующую страницу.
- Нажмите на ссылку на странице, и браузер перейдет на новую страницу.
- Нажимайте кнопки браузера «назад» и «вперед», и браузер перемещается назад и вперед по истории страниц, которые вы видели.
Угловой маршрутизатор («роутер») позаимствовал у этой модели. Он может интерпретировать URL-адрес браузера как инструкцию для перехода к сгенерированному клиентом представлению. Он может передавать необязательные параметры вспомогательному компоненту представления, который помогает ему решить, какой конкретный контент представить.
Основы
<base href>Большинство приложений маршрутизации должны добавить элемент <base> в index.html в качестве первого дочернего элемента в теге <head>, чтобы сообщить маршрутизатору, как составлять URL-адреса навигации.
Если папка приложения является корнем приложения, как это делается для примера приложения, установите значение href точно так, как показано здесь.
<base href="/">Маршрутизатор импорта
Angular Router - это дополнительная служба, которая представляет конкретный вид компонента для данного URL. Это не часть углового ядра. Он находится в своем собственном библиотечном пакете, @ angular / router. Импортируйте из него то, что вам нужно, как и из любого другого углового пакета.
import { RouterModule, Routes } from '@angular/router';конфигурация
Направленное приложение Angular имеет один одноэлементный экземпляр службы Router. При изменении URL-адреса браузера этот маршрутизатор ищет соответствующий маршрут, по которому он может определить отображаемый компонент.
Маршрутизатор не имеет маршрутов, пока вы не настроите его.
Розетка маршрутизатора
RouterOutlet - это директива из библиотеки маршрутизатора, которая используется в качестве компонента. Он действует как заполнитель, который отмечает место в шаблоне, где маршрутизатор должен отображать компоненты для этой розетки.
<router-outlet></router-outlet>
Роутер ссылки
Теперь у вас есть настроенные маршруты и место для их рендеринга, но как вам ориентироваться? URL может быть получен непосредственно из адресной строки браузера. Но большую часть времени вы перемещаетесь в результате некоторых действий пользователя, таких как щелчок тега привязки.
Директивы RouterLink на тегах привязки предоставляют маршрутизатору контроль над этими элементами. Пути навигации фиксированы, поэтому вы можете назначить строку для routerLink («одноразовая» привязка).
Если бы навигационный путь был более динамичным, вы могли бы привязаться к выражению шаблона, которое вернуло массив параметров ссылки на маршрут (массив параметров ссылки). Маршрутизатор разрешает этот массив в полный URL-адрес.
Активные ссылки маршрутизатора
Директива RouterLinkActive переключает классы CSS для активных привязок RouterLink на основе текущего RouterState.
В каждом теге привязки вы видите привязку свойства к директиве RouterLinkActive, которая выглядит как routerLinkActive = "...".
Выражение шаблона справа от равенства (=) содержит разделенную пробелами строку классов CSS, которую Маршрутизатор добавит, когда эта ссылка активна (и удалит, когда ссылка неактивна). Вы устанавливаете директиву RouterLinkActive на строку классов, таких как [routerLinkActive] = "'active fluffy'", или привязываете ее к свойству компонента, которое возвращает такую строку.
Состояние маршрутизатора
После завершения каждого успешного жизненного цикла навигации маршрутизатор строит дерево объектов ActivatedRoute, которые составляют текущее состояние маршрутизатора. Вы можете получить доступ к текущему RouterState из любой точки приложения, используя службу Router и свойство routerState.
Предыдущая: навигация по дереву компонентов с помощью DI
Далее: HttpClient
Новый контент: Composer: менеджер зависимостей для PHP , R программирования