angular - Angular routerLinkActive 未按预期工作
问题描述
我正在做一个相当简单的项目,但这个问题让我很难过!
我有路由设置并且工作正常,除了 routerLinkActive 没有保持激活的一个小问题。
我还不能在问题中嵌入图片,所以请点击链接查看我得到的结果
当我转到:http://localhost:4200/1时,“1”菜单项在导航栏中正确显示为活动状态。如果我然后转到子路由:http://localhost:4200/1/top100 '1' 菜单仍然保持设置为活动状态。这正是我希望它工作的方式。
然而,在一个非常相似的设置中,我将“4”菜单项转到:http://localhost:4200/2/A。这正确地将顶部导航栏中的“4”显示为活动状态,并将“测试 A”按钮显示为活动状态。但是,当我转到http://localhost:4200/2/B时,“测试 B”按钮正确显示为活动状态,但主导航栏在“4”上丢失了活动标志。
下面附上代码片段:
导航栏
<ul class="navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/1">1</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/notUsed', 'notUsed']">2</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/notUsed', 'notUsed']">3</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/2', 'A']">4</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/notUsed">5</a>
</li>
</ul>
按钮组
<div class="btn-group-vertical fixedWidthButtonHonour mb-3" role="group" aria-label="Senior Grades">
<button type="button" class="btn btn btn-outline-danger" [routerLink]="['/2', 'A']" routerLinkActive="active">Test A</button>
<button type="button" class="btn btn btn-outline-danger" [routerLink]="['/2', 'B']" routerLinkActive="active">Test B</button>
</div>
路线
const appRoutes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: '1', component: Component1 },
{ path: '1/top100/:name', component: ComponentTop100 },
{ path: '2', component: Component2 },
{ path: '2/:viewType', component: Component2 },
{ path: '**', redirectTo: '/', pathMatch: 'full' }
];
我无法弄清楚这两个例子之间的区别。如果有人有任何见解或工作演示来实现我所追求的,那就太好了。
谢谢大卫
解决方案
问题是,当你routerLinkActive
在. 这不是它的工作方式。您应该在链接上创建一个。['/2', 'A']
['/2', 'B']
routerLinkActive
/2
如果您不介意始终重定向/2
到/2/A
,可以执行以下操作:
在您的导航栏中:
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/2">4</a>
</li>
在您的应用程序路由中
const appRoutes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: '1', component: Component1 },
{ path: '1/top100/:name', component: ComponentTop100 },
{ path: '2', redirectTo: '2/A', pathMatch: 'full' },
{ path: '2/:viewType', component: Component2 },
{ path: '**', redirectTo: '/', pathMatch: 'full' }
];
另一种解决方案可能是[class.active]
根据您当前的路由器路径手动添加
推荐阅读
- flutter - GetX - 如何从 Get.Dialog 返回一个值?
- javascript - 我不能在 React.js 中写相对路径吗?
- python-3.x - 为什么在这种树生成算法中 root_node 的子节点数量会增加?
- sql-order-by - 如果列具有相同的值,如何通过 fetch 排序
- vuejs3 - 是否可以将数组作为模型传递给 VueJs 3 中的组件?
- node.js - 当 puppeteer 关闭 Chrome 时,indexedDB 不会保留数据库、存储或值
- lua - 如何在游戏中创建和加入私人服务器 roblox?
- javascript - 如何使用 Javascript 使 div 出现 onclick?
- ios - 在 SwiftUI 中重新创建 twitter 复制到剪贴板的动画
- hadoop - Hive UNION ALL 返回不正确的结果