角routerLinkActive不按预期工作

Question

我正在做一个相当简单的项目，但是这个问题让我很困惑！

我有路由设置和正确工作，除了一个小问题，因为routerLinkActive没有保持激活。

我还不能在问题中嵌入图像，所以请按照链接查看我正在获得的结果

路由结果

当我转到：http://localhost:4200/1时，'1‘菜单项在导航栏中正确显示为活动。如果然后转到一个子路由：http://localhost:4200/1/top100，'1‘菜单仍然被设置为active。这正是我想要的结果。

但是，在一个非常类似的设置中，我将'4‘菜单项转到：http://localhost:4200/2/A。这正确地显示顶部导航栏中的'4‘为活动，’测试A‘按钮为活动。但是当我进入http://localhost:4200/2/B时，“Test”按钮正确地显示为活动，但是主导航栏丢失了它在'4‘上的活动标志。

附在下面的代码段：

Nav Bar

<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>

Button群

<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' }
];

我找不出这两个例子的区别。很好，如果有人有任何见解或工作演示，以实现我的目标。

谢谢大卫

Answer 1

问题是当您在routerLinkActive时，['/2', 'A']上的['/2', 'B']会变得活跃起来。这不是它的工作方式。您应该在routerLinkActive链接上创建一个/2。

如果您不介意总是将/2重定向到/2/A，则可以执行以下操作：

在你的Nav酒吧：

<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]。