Angular docs. Навигация в приложении: маршрутизация в представлениях.
Данная статья является переводом статьи — In-app navigation: routing to views, официальной документации Angular, в которой рассматривается навигация в Angular приложении.
Всегда обращайтесь к первоисточнику, так как перевод может исказить смысл оригинального текста. Да и такое ощущение, что google translate сделал бы это лучше, чем то, что представлено ниже.
Введение
В одностраничном приложении, когда вам нужно обновить видимую часть экрана пользователя, происходит показ или сокрытие частей экрана, которые соответствуют определенным компонентам, вместо обычного перехода на сервер и загрузки новой страницы. Когда пользователи выполняют прикладные задачи, им необходимо перемещаться между различными представлениями, которые вы определили в приложении.
В Angular, под представлением (view) подразумевается небольшая группа элементов, которая может быть создана и уничтожена одновременно. Например, компонент с шаблоном являются представлением или шаблон связанный с директивой, также будет является представлением.
Для того чтобы управлять переходом от одного представления к другому в Angular приложении, используете Angular Router. Router обеспечивает навигацию, используя URL-адрес браузера как инструкцию по изменению представления.
Чтобы ознакомиться с маршрутизацией, посмотрите пример приложения, который включает основные функции маршрутизатора, демо или скачайте исходники проекта.
Необходимые требования
Перед созданием нового маршрута в приложении, вам следует ознакомиться со следующими разделами документации:
- Основы создания компонентов
- Основы создания и работы шаблонов
- Создать базовое приложение Angular с помощью Angular CLI.
Для знакомства с Angular, обратитесь к руководству — Getting Started. А чтобы получить более подробные сведения о создании Angular приложения, посмотрите руководство Tour of Heroes. Оба руководства помогут вам понять как использовать компоненты и шаблоны.
Создание приложения с маршрутизацией
Следующая команда использует Angular CLI (интерфейс командной строки) для создания базового приложения Angular с модулем маршрутизации AppRoutingModule, который представляет собой NgModule, в котором вы можете настраивать свои маршруты. Имя приложения в следующем примере - routing-app:
ng new routing-app --routingПри создании нового приложения, CLI предложит выбрать CSS или препроцессор CSS. В данном случае выберите CSS.
Добавление компонентов в маршрутизацию
Для использования Angular маршрутизатора в приложении должны быть созданы как минимум два компонента, чтобы приложение могло перемещаться от одного компонента к другому. В Angular для создания компонента с помощью CLI, введите в командной строке следующую команду, где first- имя вашего компонента:
ng generate component firstПовторите этот шаг для второго компонента, но задайте ему другое имя. В данном примере этоsecond.
ng generate component secondCLI автоматически добавляет суффиксComponent, поэтому, если бы вы задали имя first-component, то ваш компонент был бы FirstComponentComponent.
Данное руководство работает с приложением Angular, созданным с помощью Angular CLI. Если вы создавали проект самостоятельно, убедитесь, что у вас есть
<base href="/">в<head>в вашем файлеindex.html. Также предполагается, что папкаappявляется корнем приложения и использует"/".
Импорт новых компонентов
Чтобы использовать новые компоненты, импортируйте их в начало файла AppRoutingModule, как показано ниже:
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';Определение базового маршрута
Есть три основных строительных блока для создания маршрута.
Импортируйте AppRoutingModuleв AppModule, добавив его в массивimports.
Angular CLI выполняет этот шаг за вас. Однако, если вы создаете приложение вручную или работаете с существующим приложением, отличным от приложения, сгенерированным CLI, убедитесь, что конфигурация и импорты корректны.
Следующее — это стандартный базовый модуль приложенияAppModule , созданный CLI при указании флага--routingфлагом.
1. Импортируйте RouterModuleи Routesв свой модуль маршрутизации (AppRoutingModule).
Angular CLI выполняет этот шаг автоматически. CLI также создает массивRoutesдля ваших маршрутов и добавит их в @NgModule() соответствующие importsи exports.
2. Определите свои пути в массивеRoutes.
Каждый маршрут в этом массиве представляет собой объект JavaScript, содержащий два свойства. Первое свойство pathопределяет URL путь для маршрута. Второе свойство componentопределяет компонент, который Angular должен использовать для соответствующего пути.
3. Добавьте свои маршруты в свое приложение.
Теперь, когда вы определили свои маршруты, вы можете добавить их в приложение. Сначала добавьте ссылки на созданные компоненты. Для этого укажите в routerLink соответствующие пути, которые будут отображаться при переходе по данному маршруту. Затем добавьте <router-outlet> в основной компонент. Этот элемент сообщит Angular, куда выводить представление для выбранного маршрута
Порядок маршрута
Порядок маршрутов важен, потому что Routerпри сопоставлении маршрутов используется стратегия — первого совпадения, поэтому более конкретные маршруты следует размещать над менее конкретными. Сначала перечислите маршруты с фиксированными путями, а затем с пустыми путями, один из которых станет маршрутом по умолчанию. Универсальный маршрут (**) задается последним, потому что он соответствует каждому URL и Router выберет его, если другие маршруты не будут найдены для соответствующего пути.
Получение информации о маршруте
Часто, когда пользователь перемещается по вашему приложению, вы хотите передавать некую информацию от одного компонента к другому. Например, рассмотрим приложение, которое отображает список покупок продуктов. Каждый элемент в списке имеет уникальныйid. Чтобы отредактировать элемент, пользователи нажимают кнопку «Изменить», которая открывает EditGroceryItemкомпонент. Вам необходимо, чтобы данный компонент извлекал idпродукта, для того чтобы показывать информацию о продукте.
Вы можете использовать путь для передачи этой информации компонентам в вашем приложении. Для этого используете интерфейс ActivatedRoute.
Чтобы получить информацию о маршруте:
- Импортируйте
ActivatedRouteиParamMapв свой компонент.
import { Router, ActivatedRoute, ParamMap } from '@angular/router';Эти import’ы добавляют несколько важных элементов, которые необходимы вашему компоненту. Для того, чтобы узнать больше о каждом элементе, посетите следующие страницы документации Angular:
2. ПодключитеActivatedRoute, добавив его в конструктор вашего компонента:
constructor(private route: ActivatedRoute) {}3. Обновите метод ngOnInit(), чтобы получить доступ к параметру ActivatedRouteи извлечьid:
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
this.name = params['name'];
});
}Примечание. В предыдущем примере используется переменная name, и ей присваивается значение на основе параметраname (/orders?name=fooBar).
Настройка маршрутов с универсальным путем
Хорошее приложение должно корректно работать, когда пользователи пытаются перейти к несуществующим частям вашего приложения. Для того, чтобы добавить эту функциональность в приложение, вам необходимо добавить маршрут с универсальным маршрутом. Маршрутизатор Angular выбирает этот маршрут каждый раз, когда запрошенный URL-адрес не соответствует ни одному из возможных путей.
{ path: '**', component: }Две звездочки **, указывают маршрутизатору Angular, что это определение маршрута, который является универсальным. В качестве компонента, в маршруте выше, вы можете использовать любой компонент в своем приложении.
В общем случае, универсальный маршрут используется для показа компонента PageNotFoundComponent, или для перенаправления пользователя на главную страницу приложения. Универсальный маршрут — это последний маршрут в списке доступных маршрутов, так как он соответствует любому URL-адресу. Дополнительные сведения о том, почему порядок важен для маршрутов, см. В разделе Порядок маршрутов .
Отображение страницы 404
Чтобы отобразить страницу 404, настройте универсальный маршрут, указав в свойстве компонента, компонент который вы хотите использовать для отображения страницы 404:
Последний маршрут с ** является универсальным маршрутом. Маршрутизатор выбирает этот маршрут, если запрошенный URL-адрес не соответствует ни одному из путей в списке доступных маршрутов, и показывает пользователю компонентPageNotFoundComponent.
Настройка редиректа
Чтобы настроить перенаправление, настройте маршрут с помощью пути (path), с которого вы хотите перенаправить,redirectTo место куда перенаправить, и добавитьpathMatch, которое укажет маршрутизатору, как сопоставить URL-адрес.
В данном примере третий маршрут — это редирект, поэтому маршрутизатор по умолчанию использует маршрут first-component. Обратите внимание, что определение редиректа, предшествует маршруту с универсальным путем. Здесь путь с '' означает использование начального относительного URL.
В данном случае маршрут
''это корень приложения, при условии, что данные маршруты определены на верхнем уровне. Если же маршруты вложены, то тогда''будет соответствовать полному родительскому пути. Например, если данные пути являются частью ленивого модуля клиента, у которого в верхнем уровне путь равенcustomers, тогда и''будет соответствовать/customers.
Дополнительные сведения проpathMatchсмотрите в разделе Spotlight on pathMatch.
Вложенные маршруты
По мере того, как ваше приложение становится более сложным, вы можете создавать относительные (вложенные) маршруты в компоненте, вместо создания маршрутов в корневом компоненте. Эти вложенные маршруты называются дочерними маршрутами компонента. Формально это означает, что вы добавляете в свое приложение еще один <router-outlet>, потому что первый <router-outlet> уже добавлен в AppComponent.
В примере ниже есть два дополнительных дочерних компонента child-a, и child-b. Здесь в компонентеFirstComponentесть своя навигация, помимо той, что есть в AppComponent.
Дочерний маршрут похож на любой другой маршрут в том смысле, что ему также нужны свойстваpathи component. Единственное отличие состоит в том, что дочерние маршруты помещаются в массивchildren внутри родительского маршрута.
Использование относительных путей
Относительные пути позволяют определять пути относительно текущего сегмента URL. В следующем примере показан относительный маршрут к другому компоненту second-component. КомпонентыFirstComponentи SecondComponentнаходятся на том же уровне в дереве, однако ссылка на SecondComponentрасположена внутри FirstComponent, что означает, что маршрутизатор должен подняться на уровень выше, а затем во второй каталог, чтобы найти SecondComponent. Вместо того, чтобы записывать весь путь, до которого нужно добраться SecondComponent, вы можете использовать нотацию ../ для перехода на уровень выше.
Кроме ../, вы можете использовать ./или не использовать начальную косую черту для указания текущего уровня.
Указание относительного маршрута
Чтобы указать относительный маршрут, используйте свойство relativeToв NavigationExtras. В классе компонента импортируйте NavigationExtrasиз @angular/router.
Затем используйте relativeToв методе навигации. После массива параметров, который содержитitems, добавьте объект со свойством relativeTo, установленным в ActivatedRoute, который представлен как this.route.
goToItems() {
this.router.navigate(['items'], { relativeTo: this.route });
}Метод goToItems() определяет назначения URI относительно активного маршрута и переходит к itemsмаршруту.
Доступ к параметрам и фрагментам пути в запросе
Иногда вам требуется доступ к части маршрута, например к параметру запроса или фрагменту. В руководстве Tour of Heroes используется список героев, в котором вы можете щелкнуть по названию героя, и увидеть подробности. В данном примере, маршрутизатор будет использовать id, чтобы показать правильные данные о герое.
Сначала импортируйте следующие элементы в компонент, в который вы хотите перейти.
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';Затем добавьте сервис ActivatedRoute в конструктор компонента:
constructor(private route: ActivatedRoute) {}Настройте класс так, чтобы у вас был observable, heroes$, selectedId для хранения идентификационного номера героя, а сами герои определялись в ngOnInit(), где по параметру из запроса выбирался нужный герой.
В этом фрагменте кода предполагается, что у вас есть список героев, служба героев, функция для получения ваших героев и HTML-код для отображения вашего списка и деталей, как в примере Tour of Heroes.
Затем в компоненте, к которому вы хотите перейти, импортируйте следующие элементы.
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Observable } from 'rxjs';Заинжектите ActivatedRouteи Routerв конструкторе класса компонента, чтобы компонент имел доступ к данным сервисам:
На самом деле, пример документации гипертрофирован и не очевиден. Более простой пример, это отображение записи по id.
У вас есть список новостей, и на главной вы выводите превью первых десяти новостей, и у каждого превью есть ссылка подробнее, вида — /posts/:id.
На странице отображения новости, вы подписываетесь на параметры активного роута, получаете id из сервиса и загружаете с бекенда запись с соответствующим id:
this.route.paramMap.pipe(
switchMap(params => {
this.selectedId = Number(params.get(‘id’));
return this.httpService.get(`/posts/${selectedId}`);
})
);Ленивая загрузка
Вы можете настроить маршруты к модулям с ленивой (отложенной) загрузкой, что означает, что Angular загружает модули только по мере необходимости, а не загружает все модули при запуске приложения. Кроме того, вы можете предварительно загружать части своего приложения в фоновом режиме, чтобы улучшить взаимодействие с пользователем.
Для получения дополнительной информации о ленивой загрузке и предварительной загрузке смотрите руководство Lazy loading NgModules.
Предотвращение несанкционированного доступа
Используйте гуарды, чтобы пользователи не могли переходить к частям приложения без авторизации. В Angular доступны следующие средства защиты маршрутов:
Чтобы использовать средства защиты маршрутов, рассмотрите возможность использования маршрутов без компонентов, поскольку это упростит защиту дочерних маршрутов.
Создайте следующий гуард:
ng generate guard your-guardВ данном классе реализуйте защитную логику, которая вам нужна. В следующем примере используется CanActivateдля защиты маршрута.
В модуле маршрутизации используйте соответствующее свойство в маршруте. Здесь canActivateуказывает маршрутизатору, что нужно запустить гуадр при навигации к данному компоненту.
{
path: '/your-path',
component: YourComponent,
canActivate: [YourGuard],
}Для получения дополнительной информации по работе с гуардами посмотрите руководство — Routing tutorial section on route guards.
Ссылка и массив параметров
Массив параметров ссылки содержит компоненты для навигации в маршрутизаторе:
- Путь маршрута к компоненту назначения.
- Обязательные и необязательные параметры маршрута, которые входят в URL-адрес маршрута.
Вы можете использовать директиву RouterLink для задачи подобного массива следующим образом:
<a [routerLink]="['/heroes']">Heroes</a>Ниже приводится двухэлементный массив указанный в качестве параметра маршрута:
<a [routerLink]="['/hero', hero.id]">
<span class="badge">{{ hero.id }}</span> {{ hero.name }}
</a>Вы можете добавить необязательные параметры маршрута с помощью объекта, например { foo: 'foo' }:
<a [routerLink]="['/crisis-center', { foo: 'foo' }]">
Crisis Center
</a>Эти три примера охватывают потребности приложения с одним уровнем маршрутизации. Однако с дочерним маршрутами, например в кризисном центре, вам необходимо создавать массивы с параметрами.
Следующий пример основан на примере кризисного центра.
<a [routerLink]="['/crisis-center']">Crisis Center</a>Обратите внимание на следующее:
- Первый элемент в массиве идентифицирует родительский маршрут (
/crisis-center). - У этого родительского маршрута нет параметров.
- Для дочернего маршрута нет состояния по умолчанию, поэтому вам нужно выбрать один маршрут из доступных.
- Вы переходите к пути
CrisisListComponent, путь к которому есть/, но вам не нужно явно добавлять косую черту.
Рассмотрим следующую ссылку маршрутизатора, которая ведет от корня приложения до Dragon Crisis:
<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>- Первый элемент в массиве идентифицирует родительский маршрут (
/crisis-center). - Для этого родительского маршрута нет параметров.
- Второй элемент определяет параметр дочернего маршрута, который позволяет конкретизировать сущность (
/:id). - Для дочернего маршрута необходим параметр
id. - Вы добавляете
idв качестве второго элемента в массиве (1), который ведет до Dragon Crisis. - В результате получается путь
/crisis-center/1.
Вы также можете переопределить шаблон AppComponentс таким образом, чтобы он состоял исключительно из маршрутов Сrisis center:
template: `
<h1 class="title">Angular Router</h1>
<nav>
<a [routerLink]="['/crisis-center']">
Crisis Center
</a>
<a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">
Dragon Crisis
</a>
<a [routerLink]="['/crisis-center/2']">
Shark Crisis
</a>
</nav>
<router-outlet></router-outlet>
`Таким образом, вы можете создавать приложения с одним, двумя или более уровнями маршрутизации. Массив параметров обеспечивает гибкость для задания маршрутизации для любой глубины и любой допустимой последовательности путей, включая обязательные параметры маршрута и необязательные параметры маршрута в виде объекта.
LocationStrategy и стили URL-адресов браузера
Когда маршрутизатор переходит к новому представлению некого компонента, он обновляет местоположение и историю браузера с помощью URL адреса для данного представления. Поскольку это строго локальный URL, браузер не будет отправлять данный URL на сервер, и в результате чего, не будет перезагружать страницу.
Вот URL Crisis Center в виде “HTML5 pushState”:
localhost:3002/crisis-center/Старые браузеры будут отправлять запрос на сервер при изменении URL адреса, если данное изменение не происходит после «#» (хеша). Маршрутизаторы могут использовать это и составлять URL маршруты с хешами внутри приложения. Здесь хэш URL, который направляет в Crisis Center.
localhost:3002/src/#/crisis-center/Маршрутизатор поддерживает оба стиля с двумя провайдерами дляLocationStrategy:
PathLocationStrategy- HTML5 pushState стиль.HashLocationStrategy- хэш URL стиль.
Функция RouterModule.forRoot()устанавливает LocationStrategyк PathLocationStrategy, что делает данную стратегию дефолтной. Вы можете переключиться на стратегиюHashLocationStrategyво время процесса начальной загрузки.
Дополнительные сведения о провайдерах и процессе начальной загрузки смотрите в разделе Dependency Injection.
Выбор стратегии маршрутизации
Вы должны выбрать стратегию маршрутизации в начале разработки вашего проекта, потому что, когда приложение будет запущено, посетители вашего сайта будут зависеть от URL ссылок.
Большинство Angular приложений используют HTML5 стиль по умолчанию. Данный стиль создает URL-адреса, которые понятны пользователям, а также позволяют выполнять рендеринг на стороне сервера.
Серверный рендеринг — это метод, который позволяет улучшить скорость отклика при первой загрузке приложения. Приложение, в котором для запуска требуется более десяти секунд, может быть отрисовано на стороне сервера и отдано пользователю менее чем за секунду.
<base href>
Маршрутизатор использует history.pushState для навигации. pushStateпозволяет настраивать пути URL-адресов в приложении, например, localhost:4200/crisis-center. URL-адреса приложения могут быть неотличимы от URL-адресов сервера.
Современные браузеры были первыми, кто поддержал pushState, поэтому многие люди называют эти URL-адреса как HTML5 URL-адреса (но видимо не в России).
В разделе LocationStrategy and browser URL styles узнайте почему предпочтительнее использовать стиль HTML5, как его настроить и как при необходимости переключиться на старый стиль (#).
Вы должны добавить <base href> элемент вindex.htmlдля корректной работы маршрутизации с помощьюpushState. Браузер использует <base href>значение для задачи префикса для относительных URL-адресов при запросе файлов CSS, скриптов и изображений.
Добавьте <base>элемент сразу после <head>тега. Если папка app является корнем приложения, то установите значениеhrefв index.htmlкак показано ниже.
<base href="/">HTML5 URL-адреса и <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, скрипты) в приложении, где есть внутренние пути. Например, страница /posts будет пытаться загрузить ресурсы /posts/assets/images/…
У некоторых разработчиков может не быть возможности добавить <base>элемент, из-за того, что у них нет доступа к <head>.
В данном случае, разработчики могут по-прежнему использовать HTML5 URL-адреса, выполнив два шага:
- Указать маршрутизатору соответствующее значение
APP_BASE_HREF. - Использовать корневые 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заставит игнорировать<base href>во всех ссылках в Angular. - Фрагмент в
<base href>никогда не используется.
Для получения более полной информации о том, как <base href>используется для создания URI, смотрите раздел о преобразовании ссылок RFC.
HashLocationStrategy
Вы можете использовать HashLocationStrategy, указав useHash: true в качестве второго аргумента вRouterModule.forRoot()в AppModule.
Справочник по маршрутизатору
В следующих разделах освещаются некоторые основные концепции маршрутизатора.
Импорт роутера
Маршрутизатор Angular — это сервис, который для адреса URL представляет конкретное представление. Маршрутизатор не является частью ядра Angular и, следовательно, находится в собственном библиотечном пакете @angular/router.
Импортируйте из @angular/router то, что вам нужно, как из любого другого пакета Angular.
import { RouterModule, Routes } from '@angular/router';Настройка
У маршрутизируемого приложения Angular есть только один экземпляр службы Router. Когда URL-адрес браузера изменяется, то маршрутизатор ищет соответствующий маршрут, благодаря которому будет сопоставлено требуемое представление.
Маршрутизатор не будет содержать маршрутов, до тех пор, пока вы его не настроите. В следующем примере создается пять маршрутов, которые передаются маршрутизатору через методRouterModule.forRoot(), и затем это все подключается в AppModule.
Массив маршрутов appRoutes описывает, как перемещаться в приложении. Передайте массив методу RouterModule.forRoot() и подключите модуль роутера в imports в AppModule.
Каждый Routeо сопоставляет URL-адрес (path) с представлением компонента. Свойство путь в роуте не содержит начальных косых черт. Маршрутизатор всегда анализирует маршрут и создает для конечный URL-адрес, что позволяет использовать как относительные, так и абсолютные пути при переходе между представлениями.
Во втором маршруте :id — это токен, который является частью маршрута. Например, в URL-адресе /hero/42«42» - это значение параметра id. Компонент HeroDetailComponentиспользует значение id, для того чтобы найти героя, где в данном случае id было бы равно 42.
Свойство dataв третьем маршруте является местом хранения произвольных данных, связанных с конкретным маршрутом. Свойство data доступно для любого маршрута. Используйте его для хранения таких элементов, как заголовки страниц, текст хлебных крошек и другие статические данные, доступные только для чтения. Вы можете использовать гуарды для получения динамических данных.
Пустые кавычки в четвертом маршруте представляет собой путь по умолчанию — место, куда нужно перейти, когда путь в URL-адрес пуст. Этот маршрут по умолчанию перенаправляет на маршрут /heroes и, следовательно, отображает HeroesListComponent.
Если вам нужно увидеть, какие события происходят во время жизненного цикла навигации, есть опция enableTracing. Данная опция выводит каждое событие маршрутизатора в консоль браузера, которое случилось во время жизненного цикла навигации. Используйте enableTracingтолько для тестирования и отладки. Для этого, установите параметр enableTracing: true, передав его как объект в качестве второго аргумента в методе RouterModule.forRoot().
RouterOutlet
RouterOutlet это директива из библиотеки маршрутизатора, которая используется как компонент. RouterOutlet действует как заполнитель, который отмечает место в шаблоне, где маршрутизатор должен отображать компоненты для данного маршрута.
<router-outlet></router-outlet>
<!-- Routed components go here -->Учитывая приведенную выше конфигурацию, когда URL адрес браузера становится /heroes, маршрутизатор сопоставляет этот URL-адрес с путем маршрута /heroesи отображает HeroListComponent после компонентаRouterOutlet, который был размещен в шаблоне компонента хоста.
Ссылки маршрутизатора
При навигации в результате какого-либо действия пользователя, например клик по ссылке, используйте директивуRouterLink.
Рассмотрим следующий шаблон:
Директива RouterLinkпредоставляет контроль над ссылками в маршрутизаторе. Пути навигации фиксированы, поэтому вы можете присвоить строку routerLink(«одноразовую» привязку).
Если путь является динамическим, то вам необходимо возвращать массив параметров в routerLink; то есть массив параметров ссылки . Маршрутизатор преобразует этот массив в итоговый URL-адрес.
Активные ссылки
Директива RouterLinkActiveдобавляет CSS классы для активных RouterLinkпривязок, основываясь наRouterState.
В каждой привязке вы можете видеть RouterLinkActive, которая выглядит routerLinkActive="...".
Template expression справа от знака равенства (=) содержит разделенную пробелами строку классов CSS, которые маршрутизатор добавляет, когда ссылка активна (и удаляет, когда ссылка неактивна). Пример использования: [routerLinkActive]="'active fluffy'" .
Активные ссылки проходят каскадом вниз по каждому уровню дерева маршрутов, поэтому ссылки родительского и дочернего маршрутизаторов могут быть активными одновременно. Чтобы переопределить это поведение, вы можете привязать входную привязку [routerLinkActiveOptions] с помощью значения{ exact: true }. Если указать { exact: true } , тоRouterLinkбудет активен только в том случае, если его URL-адрес полностью совпадает с текущим URL-адресом.
Состояние маршрутизатора
После каждого успешного завершения жизненного цикла маршрутизатор строит дерево ActivatedRouteобъектов, которые будут определять текущее состояние маршрутизатора. Вы можете получить доступ к RouterStateиз любого места в приложении, используя сервисRouter и свойство routerState.
Каждый ActivatedRouteизRouterStateпредоставляет методы для перемещения по дереву маршрутов вверх или вниз, для получения информации от родительских, дочерних и родственных маршрутов.
Активированный маршрут
Путь и параметры маршрута доступны через внедренную службу маршрутизатора ActivatedRoute.
В нем много полезной информации, в том числе:
url — Observable, где пути маршрута(-ов), представлены в виде массива строк для каждой части пути.
data — Observable, который содержит data, определенный в маршруте. Также содержит любые разрешенные значения от гуардов.
paramMap — Observable, содержащий ассоциативный массив обязательных и дополнительных параметров, относящихся к маршруту. ParamMap поддерживает получение одного и нескольких значений из одного и того же параметра.
queryParamMap — Observable, который содержит ассоциативный массив параметров запроса для всех маршрутов. Массив поддерживает получение одного и нескольких значений из параметра запроса.
fragment — Observable, который представляет URL фрагмента. Доступен для всех маршрутов.
outlet — имя дляRouterOutlet, используемого для отрисовки маршрута.
routeConfig — конфигурация маршрута, содержащего исходный путь маршрута.
parent — родительский ActivatedRoute маршрут, при условии, что маршрут является дочерним.
firstChild — содержит первый ActivatedRouteв списке дочерних маршрутов.
children — содержит все дочерние маршруты, активные в текущем маршруте.
События маршрутизатора
Во время навигации Routerгенерирует навигационные события с помощьюRouter.events. Эти события варьируются от начала и окончания навигации до множества промежуточных стадий. Полный список событий представлен ниже.
NavigationStart — Событие срабатывает, когда начинается навигация.
RouteConfigLoadStart — Событие срабатывает перед ленивой загрузкой конфигурации маршрута.
RouteConfigLoadEnd — Событие срабатывает после того, как маршрут был лениво загружен.
RoutesRecognized — Событие срабатывает, когда маршрутизатор проанализировал URL и маршруты распознаны.
GuardsCheckStart — Событие запускается, когда маршрутизатор начинает запуск гуардов.
ChildActivationStart — Событие срабатывает, когда маршрутизатор активирует дочерний маршрут.
ActivationStart — Событие срабатывает, когда маршрутизатор активирует текущий маршрут.
GuardsCheckEnd — Событие срабатывает, когда маршрутизатор завершает фазу проверки роутов.
ResolveStart — Событие запускается, когда маршрутизатор начинает фазу Resolve.
ResolveEnd — Событие запускается, когда маршрутизатор завершает фазу Resolve.
ChildActivationEnd — Событие срабатывает, когда маршрутизатор завершает активацию дочернего марштрута.
ActivationEnd — Событие срабатывает, когда маршрутизатор завершает активацию текущего маршрута.
NavigationEnd — Событие срабатывает, когда навигация завершается.
NavigationCancel — Событие срабатывает, когда навигация отменена. Это может произойти, когда Route Guard возвращает false во время навигации или перенаправляет маршрут, возвращая в гуардеUrlTree.
NavigationError — Событие срабатывает, когда во время навигации происходит непредвиденная ошибка.
Scroll — Событие, которое представляет собой событие прокрутки.
Терминология
Router (роутер, маршрутизатор) — отображает компонент приложения для активного URL-адреса. Управляет переходом от одного компонента к другому.
RouterModule — отдельный модуль NgModule, который предоставляет сервисы и директивы для навигации.
Routes — определяет массив маршрутов, где каждый элемент массива сопоставляет URL-путь с компонентом.
Route — сопоставляет конкретный URL с конкретным компонентом.
RouterOutlet — директива (<router-outlet>), которая указывает, где маршрутизатор должен вывести представление.
RouterLink — директива для привязки интерактивного HTML-элемента к маршруту. Щелчок по элементу с директивой routerLink, привязанной к строке или массиву параметров, запускает навигацию.
RouterLinkActive — директива для добавления/удаления классов из элемента HTML, когда связанный элемент, содержащийся внутри или внутри элемента, становится активным/неактивным.
ActivatedRoute — сервис, предоставляемый каждому компоненту маршрута, который содержит информацию о маршруте, такую как параметры маршрута, статические данные, глобальные параметры запроса и глобальный фрагмент.
RouterState — текущее состояние маршрутизатора, включая дерево активных маршрутов вместе с удобными методами обхода дерева маршрутов.
Массив параметров— массив, который маршрутизатор интерпретирует как инструкцию маршрутизации. Вы можете привязать этот массив к RouterLinkили передать массив в качестве аргумента методуRouter.navigate.
Компонент маршрутизации — Компонент Angular с элементом, RouterOutletкоторый отображает представления на основе навигации по маршрутизатору.
