Question

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

我有路由设置并可以正常工作，但有一个小的问题是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' }
];

我无法计算出两个示例之间的区别。如果任何人有任何见识或正在工作的演示都能实现我的追求，那就太好了。

谢谢大卫

Answer 1

问题是，您希望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' } ];

Angular routerLinkActive无法正常工作

1 个答案: