RouterLink

При применении к элементу в шаблоне он превращает этот элемент в ссылку, которая запускает переход к маршруту. При переходе один или несколько компонентов маршрутизации открываются в одном или нескольких расположениях <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 браузера. Например:

<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.