[英]Angular routerLinkActive not working as expected
我正在一个相当简单的项目上工作,但是这个问题让我很困惑!
我有路由设置并可以正常工作,但有一个小的问题是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' }
];
我无法计算出两个示例之间的区别。 如果有人能实现我的追求,那么如果有任何见解或工作演示就很好。
谢谢大卫
问题在于,当您位于['/2', 'B']
时,您希望['/2', 'A']
上的routerLinkActive
处于活动状态。 这不是它的工作方式。 您应该在/2
链接上创建一个routerLinkActive
。
如果您不介意始终将/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]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.