Маршрут routerLinkActive для дочернего и родительского
Я пытаюсь применить или выделить маршруты навигации для своей строки меню с кодом ниже, что я мог получить, так это то, что я мог выделить подменю, но не смог выделить родительскую строку меню.
<li class = "nav-item dropdown"><a
class = "nav-link dropdown-toggle " id = "navbarDropdownMenuLink"
data-toggle = "dropdown" style = "color: white; cursor: pointer;"
[routerLinkActive] = "['class1']">Parent</a>
<div class = "dropdown-menu dropdown-menu-left"
aria-labelledby = "navbarDropdownMenuLink">
<a class = "dropdown-item"
[routerLink] = "['app-child1']"
[routerLinkActive] = "['class1']"
>Child 1</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item"
[routerLink] = "['app-child2']"
[routerLinkActive] = "['class1']"
>Child 2</a>
</div>
</li>
CSS-класс:
.class1{
background-color: #007bff;
}
вы могли бы проверить активный маршрут? затем применить класс соответственно?
Ответы 3
Вы можете использовать ссылочную переменную шаблона (#), чтобы получить ссылку на routerLinkActive и ее свойства, а затем использовать isActive.
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle"
id = "navbarDropdownMenuLink"
data-toggle = "dropdown"
style = "color: white; cursor: pointer;"
[ngClass] = "{'class1': child1RLA.isActive || child2RLA.isActive}"> <!-- <-- Check if child routes are active -->
Parent
</a>
<div class = "dropdown-menu dropdown-menu-left"
aria-labelledby = "navbarDropdownMenuLink">
<a class = "dropdown-item"
[routerLink] = "['app-child1']"
[routerLinkActive] = "['class1']"
#child1RLA = "routerLinkActive"> <!-- <-- Assign routerLinkActive reference to child1RLA variable -->
Child 1
</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item"
[routerLink] = "['app-child2']"
[routerLinkActive] = "['class1']"
#child2RLA = "routerLinkActive"> <!-- <-- Assign routerLinkActive reference to child2RLA variable -->
Child 2
</a>
</div>
</div>
</li>
Какой? Это не "угловой идентификатор". Это ссылочная переменная шаблона. Как тогда можно использовать exportAs директив? И как тогда я могу использовать именно этот метод в своем проекте?
это не директива? и, вероятно, по той же причине люди используют jquery в угловых проектах. только потому, что вы могу что-то делаете, не означает, что вы должен
Что вы подразумеваете под "не директивой"? Роутерлинкактиве — это директива, и у него есть exportAs: 'routerLinkActive', который вы можете использовать для доступа к его свойствам, специфичным для директивы. Прочтите Примеры в официальных документах.
я никогда не говорил, что RouterLinkActive не директива, я сказал, что #..... это не директива, это идентификатор
Вы читали, что я написал? Я сказал: это не "угловой идентификатор". Это ссылочная переменная шаблона. Когда я сказал #... это директива. Это ссылка на директиву. Убедительно прошу вас отозвать отрицательный голос, потому что в этой ситуации вы совершенно неправильно. В ответ я предлагаю %100 действительное использование.
но поскольку #... не может быть продублирован в одном и том же html-файле, он также является допустимым идентификатором. как вы уверены, что я даунвотер? и если вы читаете всплывающую подсказку, голосование проводится за полезность, а не за то, считается ли ответ правильным или нет
Он не дублируется. #child1RLA и #child2RLA дублируются? Для удобства я уже использую этот метод для структурирования главного меню в своих проектах. Как бы то ни было... Я закончил этот разговор.
я не говорил, что они дублируются, я просто сказал, что они не могут быть дублированы, следовательно, они также правильно используются в качестве идентификаторов. а для меня такие люди как ты портят все из-за плохих ответов
просто поместите routerLinkActive в родительский элемент, как описано здесь: https://angular.io/api/router/RouterLinkActive#description
<div routerLinkActive = "active-link" [routerLinkActiveOptions] = "{exact: true}">
<a routerLink = "/user/jim">Jim</a>
<a routerLink = "/user/bob">Bob</a>
</div>
Чтобы выделить ссылку в боковом меню, просто добавьте routerLinkActive="cssClassName" к якорным элементам, например:
<a routerLink = "/profile" routerLinkActive = "cssClassName">Profile</a>
<a routerLink = "/profile/details" routerLinkActive = "cssClassName">Profile Details</a>
это выделит обе ссылки, если маршрут станет /profile или /profile/details
Если вы не хотите выделять родительский маршрут, когда пользователь выбирает данные профиля в этом случае, просто добавьте дополнительный атрибут к родительскому маршруту, т. е. «routerLinkActiveOptions», следующим образом:
<a routerLink = "/profile" routerLinkActive = "cssClassName"
[routerLinkActiveOptions] = "{ exact: true }">Profile</a>
Это простой способ выделить ссылки бокового меню, когда они активируются.
где вы применяете класс
class1?