Angular router redirect to
Именованные элементы router-outlet
Элемент base
Элемент base задает URl, с которым будут сравниваться пути маршрутизации.
Директива routerLink
Выражения для routerLink задаются в виде массива, значения которого соответствуют каждому конкретному сегменту.
Директива routerLinkActive
Служба ActivatedRoute и параметры маршрута
Свойство ActivatedRoute
Свойства ActivatedRouteSnapshot
Свойства URLSegment
Реагируем на текущие изменения навигации при помощи ActivatedRoute
Свойства класса ActivatedRoute относящиеся к Observable:
Множественные параметры и routerLink
Mы сможем обратиться к компоненту с запросом типа /item/edit/7 :
Выражения для routerLink задается в виде массива, значения которого соответствуют каждому конкретному сегменту.
Дополнительные(необязательные) параметры маршрута
В браузере: http://localhost:3000/products/1/edit;name=John;city=Moscow
Получить в компоненте можно точно также как и для основных параметров (см. пример выше).
Класс Router
Класс Router предоставляет доступ к системе навигации из компонентов.
Свойства и методы Класса Router
Система маршрутизации уничтожает компонент после того, как он перестает отображаться.
Навигация с queryParams и хэшем
События навигации
Типы Event для Router.events
Универсальные маршруты
Перенаправление маршрутов
Дочерние маршруты
Свойства ActivatedRoute для обращения к частям маршрута
Это очень удобно, так как дочерний компонент, к примеру, не получает уведомления, если изменились параметры у родительского компонента.
Guards
Свойства для использования guards:
resolve
Определяем Resolvers как отдельный сервис:
Добавляем вышеописанный сервис в роутинг:
Модифицируем компонент для работы с resolver:
Также удобно в resolver обрабатывать ошибки и, например, перенаправлять пользователя на нужную страницу.
canActivate
Допустимые значения, которые возвращает метод CanActivate :
И не забудьте добавить AuthGuardLogin в providers :
canActivateChild
canDeactivate
Деактивация маршрута происходит при уходе пользователя с маршрута. Полезно, например, если у пользователя остались несохраненные данные. CanDeactivate на angular.io
Класс canDeactivate получает три аргумента:
Теперь при переходе на страницу phrases в консоли вы сможете увидеть подгружаемый chank.
Отметьте, что для Guard вместо canActivate: [CanLoadChildModuleGuard] нужно писать canLoad: [CanLoadChildModuleGuard]
Предзагрузка для lazy модулей
Для lazy модулей мы можем настроить предзагрузку. Существует параметр preloadingStrategy со значениями:
Анимация при роутинге
router-outlet заворачиваем в тег, на котором вешаем анимацию:
Angular Router: раскрываем некоторые интересные факты и особенности
В этой статье предполагается, что читатель имеет некоторые базовые знания об Angular Router (например, навигация по маршруту, outlets). К концу вы должны лучше понять, на что способен этот пакет.
Относительные и абсолютные перенаправления
Путь по этому свойству может быть относительным или абсолютным. Прежде чем раскрывать различия между этими двумя вариантами, давайте посмотрим, какую конфигурацию мы будем использовать:
Демо StackBlitz можно найти здесь.
В то время как при использовании относительного пути поиск начнется с первого маршрута в массиве, с которого началась операция перенаправления:
Кроме того, еще одна замечательная особенность абсолютных перенаправлений заключается в том, что они могут включать именованные точки:
Стоит отметить, что операция абсолютного перенаправления может выполняться только один раз во время перехода маршрута.
Во-первых, с маршрутом без подстановочных знаков мы можем повторно использовать query params и positional params (параметры, которые следуют модели :nameOfParam ) из текущего выданного URL:
В приведенном выше фрагменте мы видим, что этому шаблону следует
А вот куда бы мы попали по такому маршруту:
Кроме того, при использовании пути non-wildcard и перенаправления relative эти дополнительные сегменты URL будут добавлены к redirectTo сегментам
Примечание. Это работает только для relative переадресации.
Итак, мы можем добраться до маршрута BComponent следующим образом:
Если мы начнем навигацию с
Вот демонстрация StackBlitz, которая показывает, как повторно использовать параметры запроса в маршруте с подстановочными знаками.
Router.navigate против Router.navigateByUrl
Если вы хотите поэкспериментировать с некоторыми примерами, вы можете найти их в этой демонстрации StackBlitz.
Как устанавливается URL-адрес в браузере?
Параметр skipLocationChange
Здесь вы можете найти демонстрацию StackBlitz.
Как видите, из-за того, что используется эта опция, /d даже не будет отображаться в адресной строке. Несмотря на это, компонент маршрута /d ( DComponent ) будет загружен.
Иерархия, созданная директивой RouterOutlet
Здесь начинается самое интересное. Посмотрим, каковы первые шаги инициализации:
Теперь вы можете задаться вопросом, почему класс ChildrenOutletContexts должен поддерживать данный интерфейс:
Давайте усовершенствуем эту недавно изученную концепцию с помощью демонстрации StackBlitz, с помощью которой мы сможем увидеть, что эта иерархия.
Вы можете визуализировать это, проверив вывод консоли после нажатия начальной кнопки. Это также может служить методом отладки на случай, если что-то не так с вашими маршрутами.
Если мы посмотрим, как RouterOutlet что-то отображает на экране, мы увидим, как используется OutletInjector :
Нужно ли отказываться от подписки на свойства ActivatedRoute?
Вот как создается ActivatedRoute :
Предположим, у вас есть конфигурация, которая выглядит так:
и выданный URL, например a/123/b
у вас будет дерево ActivatedRoute :
Каждый раз, когда вы планируете навигацию (например router.navigateToUrl() ), маршрутизатор должен пройти несколько важных этапов:
Итак, для нашей конфигурации маршрута:
в контексты RouterOutlet будет выглядеть следующим образом (примерно):
Обратите внимание, что this.activated держит маршрутизируемый компонент (например AComponent ) и this._activatedRoute держит ActivatedRoute для этого компонента.
Давайте теперь посмотрим, что происходит, когда мы переходим к другому маршруту и текущее представление уничтожается:
где RouterOutlet.deactivate() выглядит так:
Параметр paramsInheritanceStrategy
Например, с такой конфигурацией маршрута:
Вы можете увидеть приведенные выше результаты и продолжить эксперименты в этой демонстрации StackBlitz.
Давайте также рассмотрим еще несколько примеров:
Параметр queryParamsHandling
Все примеры можно найти в этой демонстрации StackBlitz.
Также есть хороший совет, связанный с этой функцией, который позволяет нам повторно использовать одно и то же представление без перезагрузки компонента, но с разными queryParams :
Как указать, когда должны запускаться гуарды и резолверы
Вместо использования приложения StackBlitz на этот раз мы воспользуемся некоторыми примерами, извлеченными из нескольких тестовых случаев. Конфигурация маршрута будет такой:
с упоминанием, что resolver это просто счетчик, который увеличивается каждый раз при вызове его функции.
Вот несколько примеров и логика, определяющая тестовый пример:
Поначалу эта опция pathParamsChange может показаться немного запутанной, но, возможно, мы сможем прояснить ее на нескольких примерах:
Вывод
В этой статье мы рассмотрели многие полезные функции @angular/router. Я надеюсь, что смог ответить на некоторые вопросы, которые у вас могли возникнуть об этом пакете, и пролить свет на то, почему он такой мощный.
Маршрутизация
Определение маршрутов
Маршрутизация позволяет сопоставлять запросы к приложению с определенными ресурсами внутри приложения.
Для определения маршрутов возьмем базовую структуру приложения:
Для работы с маршрутизацией в первую очередь стоит определить базовый адрес приложения. Для этого возьмем веб-страницу index.html и добавим в секцию элемент :
В качестве базового адреса будет рассматриваться корень приложения.
Каждый маршрут сопоставляется с определенным компонентом. Поэтому добавим в проект ряд компонентов. Так, добавим в папку src/app новый файл home.component.ts :
Этот простенький компонент выводит обычный заголовок.
Далее добавим в папку src/app новый файл about.component.ts :
И также добавим еще один файл not-found.component.ts :
RouterModule и добавление маршрутов
Итак, кроме главного компонента AppComponent в проекте определено еще три компонента, каждый из которых просто выводит некоторый заголовок. Для каждого из этих компонентов мы можем определить свой маршрут. Для этого изменим код модуля AppModule:
Во-первых, здесь импортируются модуль маршрутизации RouterModule и класс Routes, представляющий коллекцию маршрутов:
Далее определяется сам набор маршрутов:
Если запрос не содержит никаких сегментов, например, просто имя домена «http://localhost:3000/», то такой запрос будет сопоставляться с путем «» (пустая строка) и будет обрабатываться компонентом HomeComponent.
Если приложение получит запрос, который не подходит ни под один из выше определенных маршрутов, то он будет сопоставляться с шаблоном «**», где две звездочки представляют любой путь.
Чтобы применить маршруты, они передаются в метод RouterModule.forRoot(appRoutes) :
RouterOutlet
Мы определили три разных компонента для разных маршрутов, однако в качестве главного компонента выступает AppComponent. Этот компонент выступает в качестве контейнера для остальных компонентов, которые будут обслуживать запросы к приложению.
Но чтобы можно было внедрить в AppComponent тот компонент, который обрабатывает запрос, необходимо использовать элемент RouterOutlet. Для этого изменим код AppComponent:
На место элемента будет рендериться компонент, выбранный для обработки запроса.
Запустим приложение. По умолчанию приложение запускается без сегментов, поэтому запрос обрабатывает HomeComponent:
Перейдем по пути «localhost:xxxx/about»:
При переходе к любому другому адресу сработает компонент NotFoundComponent:
URL Matching и порядок маршрутов
Но при определении маршрутов следует учитывать их порядок. Вполне возможно, что под определенный запрос будет соответствовать сразу несколько маршрутов. В этом случае запрос будет обрабатываться первым из них. Другие же маршруты не будут учитываться. Например, если мы изменим порядок маршрутов:
То в этом случае запрос /about будет обрабатываться первым маршрутом, поскольку он соответствует запросу /about (путь ‘**’ соответствует любому набору символов). Поэтому маршрут
Переадресация
Вполне возможно, что по какому-то маршруту мы захотим сделать переадресацию по другому пути. Например, в случае, если нужного маршрута для запроса не найдено, мы можем переадресовать на главную страницу:
Также мы можем задать критерий соответствия строки запроса маршруту с помощью параметра pathMatch :
А запрос /contact/5 не будет соответствовать этому маршруту, так как после «contact» идут другие сегменты.
Redirect user with router depending on logged in status
I would like to automatically route to a login page if the user is not logged in.
app.module.ts
2 Answers 2
Here are 3 ways to do what you asked, from least preferred to favorite:
Option 1. Imperatively redirect the user in AppComponent
Not very good. It’s better to keep the «login required» information in the route declaration where it belongs.
Option 2. Use a CanActivate guard
Add a CanActivate guard to all the routes that require the user to be logged in:
And then I need to implement it. In this example I’ll use the guard to redirect the user if they’re not logged in:
Check out the doc about route guards if this doesn’t make sense: https://angular.io/docs/ts/latest/guide/router.html#guards
This option is better but not super flexible. What if we need to check for other conditions than «logged in» such as the user permissions? What if we need to pass some parameter to the guard, like the name of a role «admin», «editor».
Option 3. Use the route data property
The best solution IMHO is to add some metadata in the routes declaration to indicate «this route requires that the user be logged in».
We can use the route data property for that. It can hold arbitrary data and in this case I chose to include a requiresLogin flag that’s either true or false ( false will be the default if the flag is not defined):
Now the data property in itself doesn’t do anything. But I can use it to enforce my «login required» logic. For that I need a CanActivate guard again.
Too bad, you say. Now I need to add 2 things to each protected route: the metadata AND the guard.
I’ll only show the piece of code where the guard retrieves the data attached to the route, as what you do inside the guard really depends on your situation:
For the above code to be executed, you need to have a route similar to:
Маршрутизация¶
В Angular маршрутизация представляет собой переход от одного представления (шаблона) к другому в зависимости от заданного URL. Причем навигация может осуществляться и внутри представления.
Навигация в Angular приложениях происходит без перезагрузки страницы.
URL организуются в специальные модули и определяются для каждого отдельного модуля приложения.
При определении маршрута можно указать ряд свойств:
Обратите внимание, что компоненты-маршруты должны быть импортированы в модуль Angular маршрутизации.
Родительский маршрут не обязательно должен определять свойство component, он может просто объединять в себе логически связанные маршруты. Например, в примере выше contacts — родитель для страниц с контактами.
В Angular маршрутизации важен порядок определения URL. При запросе маршрутизатор ищет первый подходящий маршрут в порядке их определения. Поэтому обработка любого URL всегда должна определяться в самом конце.
Метод forRoot() используется только при определении набора URL корневого модуля. Для остальных (дочерних) модулей используется метод forChild().
Далее AppRoutingModule импортируется в модуль, для которого создается навигация.
Для перехода на дочерний маршрут (child route) необходимо указать полный путь к нему начиная с самого верхнего родителя.
Как видно, все ссылки указываются от корня приложения (начинаются с / ). Но в Angular routing также возможно использование относительных ссылок.
Указание относительных ссылок позволяет избежать переписывания всех ссылок дочерних компонентов при изменении родительской.
Маршруты с параметрами¶
В консоль будет выведена полная информация о текущем URL. Необходимые свойства:
В шаблоне параметры маршрутизации передаются следующим образом: в качестве значения директивы указывается массив, первое значение которого URL, второе — значение параметра данного URL.
Параметры строки запроса и hash имеют следующую запись:
Множественная маршрутизация (named outlets)¶
В Angular различают основные и второстепенные маршруты. В пределах одного компонента может быть только один основной маршрут и сколько угодно второстепенных.
Обновим определение Angular routing.
Теперь в приложении в правой колонке будет отображаться информация о скидках. Чтобы отобразить/скрыть значение второстепенного маршрута, можно выполнить следующее:
Или из контроллера:
При отображении/скрытии обратите внимание на значение адресной строки браузера. В конце URL должна появляться/исчезать приписка.