Справочник по маршрутизатору

В следующих разделах рассмотрены некоторые основные понятия и термины, связанные с маршрутизатором.

События маршрутизатора

При каждой навигации Router передаёт события навигации через свойство Router.events. Эти события перечислены в следующей таблице.

Если включить функцию withDebugTracing, Angular будет выводить эти события в консоль.

Терминология маршрутизатора

Ниже приведены основные термины, связанные с Router, и их значения:

<base href>

Для навигации маршрутизатор использует браузерный механизм history.pushState. pushState позволяет настраивать пути URL внутри приложения; например, localhost:4200/crisis-center. URL-адреса внутри приложения могут быть неотличимы от URL-адресов сервера.

Современные браузеры с поддержкой HTML5 первыми получили поддержку pushState, поэтому многие называют такие URL-адреса URL-адресами «в стиле HTML5».

Чтобы маршрутизация pushState работала, необходимо добавить в index.html приложения элемент <base href>. Браузер использует значение <base href> как префикс относительных URL-адресов при обращении к файлам CSS, скриптам и изображениям.

Добавьте элемент <base> сразу после тега <head>. Если папка app является корнем приложения, как в данном приложении, задайте значение href в index.html, как показано ниже.

<base href="/" />

URL-адреса HTML5 и <base href>

В приведённых далее рекомендациях будут упоминаться разные части URL-адреса. На этой схеме показано, какие именно части имеются в виду:

foo://example.com:8042/over/there?name=ferret#nose
\_/   \______________/\_________/ \_________/ \__/
 |           |            |            |        |
scheme    authority      path        query   fragment

Хотя по умолчанию маршрутизатор использует стиль HTML5 pushState, эту стратегию необходимо настроить с помощью <base href>.

Предпочтительный способ настройки стратегии — добавить тег элемента <base href> в <head> index.html.

<base href="/" />

Без этого тега браузер может не загрузить ресурсы (изображения, CSS, скрипты) при переходе по глубокой ссылке в приложение.

Некоторые разработчики могут не иметь возможности добавить элемент <base>, например, если у них нет доступа к <head> или index.html.

Эти разработчики всё равно могут использовать URL-адреса HTML5, выполнив следующие два шага:

1. Укажите для маршрутизатора подходящее значение APP_BASE_HREF.
2. Используйте корневые URL-адреса (URL-адреса с authority) для всех веб-ресурсов: CSS, изображений, скриптов и HTML-файлов шаблонов.

   • Значение <base href> path должно заканчиваться символом «/», поскольку браузеры игнорируют символы в path, следующие за последним справа «/»

   • Если <base href> содержит часть query, query используется только в том случае, если path ссылки на странице пусто и не содержит query. Это означает, что query в <base href> включается только при использовании HashLocationStrategy.

   • Если ссылка на странице является корневым URL-адресом (содержит authority), <base href> не используется. Таким образом, APP_BASE_HREF с полномочиями сервера приведёт к тому, что все ссылки, созданные Angular, будут игнорировать значение <base href>.

   • Фрагмент в <base href> никогда не сохраняется

Более подробную информацию о том, как <base href> используется для построения целевых URI, см. в разделе RFC, посвящённом преобразованию ссылок.

Стратегия HashLocationStrategy

Используйте HashLocationStrategy, передав useHash: true в объекте в качестве второго аргумента метода RouterModule.forRoot() в AppModule.

providers: [provideRouter(appRoutes, withHashLocation())];

При использовании RouterModule.forRoot настройка задаётся с помощью useHash: true во втором аргументе: RouterModule.forRoot(routes, {useHash: true}).