RouterLinkWithHref

При применении к элементу шаблона этот элемент становится ссылкой, инициирующей переход к маршруту. При переходе один или несколько компонентов маршрута отображаются в одном или нескольких расположениях <router-outlet> на странице.

Если задана конфигурация маршрута [{ path: 'user/:name', component: UserCmp }], следующий код создаёт статическую ссылку на маршрут: <a routerLink="/user/bob">link to user component</a>

Для создания ссылки можно использовать динамические значения. Для динамической ссылки передайте массив сегментов пути, а затем параметры для каждого сегмента. Например, ['/team', teamId, 'user', userName, {details: true}] создаёт ссылку на /team/11/user/bob;details=true.

Несколько статических сегментов можно объединить в один термин и комбинировать с динамическими сегментами. Например, ['/team/11/user', userName, {details: true}]

Входные данные ссылки рассматриваются как разница относительно текущего URL. Например, предположим, что текущий URL — /user/(box//aux:team). Ссылка <a [routerLink]="['/user/jim']">Jim</a> создаёт URL /user/(jim//aux:team). Подробнее см. в разделе Router#createUrlTree.

В ссылке можно использовать абсолютные или относительные пути, задавать параметры запроса, управлять их обработкой и сохранять историю состояний навигации.

Относительные пути ссылок

Перед именем первого сегмента можно указать /, ./ или ../.

• Если первый сегмент начинается с /, маршрутизатор ищет маршрут от корня приложения.
• Если первый сегмент начинается с ./ или не начинается с косой черты, маршрутизатор ищет маршрут среди дочерних маршрутов текущего активированного маршрута.
• Если первый сегмент начинается с ../, маршрутизатор поднимается на один уровень вверх по дереву маршрутов.

Задание и обработка параметров запроса и фрагментов

Следующая ссылка добавляет параметр запроса и фрагмент в созданный URL:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}"
fragment="education"> link to user component
</a>

По умолчанию директива создаёт новый URL с указанными параметрами запроса. В примере создаётся ссылка: /user/bob?debug=true#education.

Можно указать директиве другой способ обработки параметров запроса, задав в ссылке параметр queryParamsHandling. Допустимые значения:

• 'merge': объединяет заданные queryParams с текущими параметрами запроса.
• 'preserve': сохраняет текущие параметры запроса.

Например:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}"
queryParamsHandling="merge"> link to user component
</a>

queryParams, fragment, queryParamsHandling, preserveFragment и relativeTo нельзя использовать, если входное значение routerLink — это UrlTree.

См. UrlCreationOptions#queryParamsHandling.

Сохранение истории навигации

Можно указать значение state, которое будет сохранено в свойстве History.state объекта History браузера. Например:

<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
  link to user component
</a>

Используйте Router#currentNavigation, чтобы получить сохранённое значение состояния навигации Signal. Например, чтобы зафиксировать tracingId во время события NavigationStart:

// Get NavigationStart events
router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.currentNavigation();
  tracingService.trace({id: navigation.extras.state.tracingId});
});

Пользовательские элементы, совместимые с RouterLink

Чтобы пользовательский элемент работал с routerLink, он должен реализовать атрибут href и включать href в массив статического свойства/геттера observedAttributes.