Исключить класс стиля routerLinkActive для некоторых маршрутов

У меня есть заголовок страницы с 4 основными вкладками. Вкладка МОЙ ПРОФИЛЬ (/profile) имеет дочернюю вкладку Действия, доступную на маршруте /profile/action-items. У меня также есть главная вкладка ACTION ITEMS, которая в основном перенаправляет пользователя на /profile/action-items. Это основная причина моей проблемы. Когда /profile/action-items маршрут активен, названия вкладок МОЙ ПРОФИЛЬ и ДЕЙСТВИЯ подсвечиваются из-за использования routerLinkActive. Однако я хочу, чтобы в /profile/action-items выделялись только ДЕЙСТВИЯ.

заголовок приложения

Я пытался использовать [routerLinkActiveOptions]="{exact: true}", но в этом случае МОЙ ПРОФИЛЬ не выделяется, когда мы переходим к его вложенным вкладкам, например. /profile/bookmarks

Есть ли способ решить проблему?


angular angular-routing angular-routerlink
person Nikita Marinosyan    schedule 21.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я знаю, routerLinkActive не имеет встроенной поддержки желаемого поведения. Решение здесь состояло бы в том, чтобы вместо этого использовать ngClass и подписаться на ActivatedRoute, применяя желаемый класс active в зависимости от точного маршрута.

person Will Alexander    schedule 21.02.2019
comment
Похоже, вы правы. Это сработало для меня. Однако я нашел нужную функцию в невыполненной работе Angular github.com/angular/angular/issues/13205. (еще не реализовано) - person Nikita Marinosyan; 21.02.2019
comment
Я думаю, вы всегда можете заменить {exact: true} на {exact: testResult} и заставить testResult реагировать на ActivatedRoute, если вы действительно хотите придерживаться схемы routerLinkActive. - person Will Alexander; 21.02.2019