下拉切换的样式按钮取决于 nav-link 的 RouterLinkActive
Style button of dropdown toggle depending on RouterLinkActive of nav-link
我的导航栏包含 3 个项目:2 次 <li>
,带有一个 <a>
元素和一个下拉按钮组。当其中一个 nav-link 下拉选项被选中时,我想突出显示下拉切换按钮。
这是我的代码:
<ul class="navbar-nav mx-auto h-100 navigation-items">
<li class="nav-item active">
<a
[routerLink]="['/app', 'tab1']"
routerLinkActive="active-link"
class="nav-link h-100"
>Tab1</a
>
</li>
<div class="btn-group dropdown" dropdown>
<button
class="btn btn-link nav-link h-100 dropdown-toggle"
id="button-basic"
dropdownToggle
type="button"
--> routerLinkActive="active-link" <--- Doesn't work
>
Dropdown
<fa-icon [icon]="faChevronDown" size="xs"></fa-icon>
</button>
<ul
id="dropdown-basic"
*dropdownMenu
class="dropdown-menu main-nav"
role="menu"
aria-labelledby="button-basic"
>
<li role="menuitem">
<a
class="dropdown-item"
[routerLink]="['/app', 'tab2', 'link1']"
routerLinkActive="active-link"
>Link1
</a>
</li>
<li role="menuitem">
<a
class="dropdown-item"
data-letter=""
[routerLink]="['/app', 'tab2', 'link2']"
routerLinkActive="active-link"
>Link2
</a>
</li>
<li role="menuitem">
<a
class="dropdown-item"
[routerLink]="['/app', 'tab2', 'link3']"
routerLinkActive="active-link"
>Link3
</a>
</li>
</ul>
</div>
<li class="nav-item active" fxLayoutAlign="center center">
<a
[routerLink]="['/app', 'tab3']"
title="Inplannen"
routerLinkActive="active-link"
class="nav-link h-100"
>Tab3</a
>
</li>
</ul>
我想根据下拉菜单项的 routerLinks 之一是否处于活动状态来更改按钮的样式。但是,由于按钮本身不包含任何路由信息,菜单也没有自己的父页面,所以我在互联网上找到的解决方案对我来说还没有用。
- 如您所见,简单地将 routerLinkActive="active-link" 添加到按钮元素是行不通的。
- 将
routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"
添加到父 btn-group 可以,但不能帮助我动态设置按钮本身的样式。 (来源:https://angular.io/api/router/RouterLinkActive)
- 目前,RouterLinkActive 样式在
<li> nav-item
元素和下拉项上运行良好。我只想将它添加到 <button>
元素。
有人知道解决方法吗?还是我应该接受无法使用 RouterLinkActive 直接设置按钮样式?
如果您需要进一步说明或我的 .scss 文件,请发表评论..
美好的一天!
你的问题是按钮没有路由器 link 指令,它无法处理路由器事件并确定 - 它是当前路由还是否。
解决方案是获取所需路由器的引用 link 并在另一个地方(你想要的地方)使用它。
查看这个非常基本的示例以了解思路:
<li class="menu-item" [class.menu-item--active]="dashboardLinkRef.isActive">
<a routerLink="/dashboard" routerLinkActive #dashboardLinkRef="routerLinkActive">
Dashboard
</a>
</li>
<!-- Can be multiple refs to router links, that's not a problem ;) -->
<li class="menu-item" [class.menu-item--active]="loginLinkRef.isActive">
<a routerLink="/login" routerLinkActive #loginLinkRef="routerLinkActive">
Login
</a>
</li>
我的导航栏包含 3 个项目:2 次 <li>
,带有一个 <a>
元素和一个下拉按钮组。当其中一个 nav-link 下拉选项被选中时,我想突出显示下拉切换按钮。
这是我的代码:
<ul class="navbar-nav mx-auto h-100 navigation-items">
<li class="nav-item active">
<a
[routerLink]="['/app', 'tab1']"
routerLinkActive="active-link"
class="nav-link h-100"
>Tab1</a
>
</li>
<div class="btn-group dropdown" dropdown>
<button
class="btn btn-link nav-link h-100 dropdown-toggle"
id="button-basic"
dropdownToggle
type="button"
--> routerLinkActive="active-link" <--- Doesn't work
>
Dropdown
<fa-icon [icon]="faChevronDown" size="xs"></fa-icon>
</button>
<ul
id="dropdown-basic"
*dropdownMenu
class="dropdown-menu main-nav"
role="menu"
aria-labelledby="button-basic"
>
<li role="menuitem">
<a
class="dropdown-item"
[routerLink]="['/app', 'tab2', 'link1']"
routerLinkActive="active-link"
>Link1
</a>
</li>
<li role="menuitem">
<a
class="dropdown-item"
data-letter=""
[routerLink]="['/app', 'tab2', 'link2']"
routerLinkActive="active-link"
>Link2
</a>
</li>
<li role="menuitem">
<a
class="dropdown-item"
[routerLink]="['/app', 'tab2', 'link3']"
routerLinkActive="active-link"
>Link3
</a>
</li>
</ul>
</div>
<li class="nav-item active" fxLayoutAlign="center center">
<a
[routerLink]="['/app', 'tab3']"
title="Inplannen"
routerLinkActive="active-link"
class="nav-link h-100"
>Tab3</a
>
</li>
</ul>
我想根据下拉菜单项的 routerLinks 之一是否处于活动状态来更改按钮的样式。但是,由于按钮本身不包含任何路由信息,菜单也没有自己的父页面,所以我在互联网上找到的解决方案对我来说还没有用。
- 如您所见,简单地将 routerLinkActive="active-link" 添加到按钮元素是行不通的。
- 将
routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"
添加到父 btn-group 可以,但不能帮助我动态设置按钮本身的样式。 (来源:https://angular.io/api/router/RouterLinkActive) - 目前,RouterLinkActive 样式在
<li> nav-item
元素和下拉项上运行良好。我只想将它添加到<button>
元素。
有人知道解决方法吗?还是我应该接受无法使用 RouterLinkActive 直接设置按钮样式?
如果您需要进一步说明或我的 .scss 文件,请发表评论..
美好的一天!
你的问题是按钮没有路由器 link 指令,它无法处理路由器事件并确定 - 它是当前路由还是否。 解决方案是获取所需路由器的引用 link 并在另一个地方(你想要的地方)使用它。
查看这个非常基本的示例以了解思路:
<li class="menu-item" [class.menu-item--active]="dashboardLinkRef.isActive">
<a routerLink="/dashboard" routerLinkActive #dashboardLinkRef="routerLinkActive">
Dashboard
</a>
</li>
<!-- Can be multiple refs to router links, that's not a problem ;) -->
<li class="menu-item" [class.menu-item--active]="loginLinkRef.isActive">
<a routerLink="/login" routerLinkActive #loginLinkRef="routerLinkActive">
Login
</a>
</li>