Angular 角度两个不同的路径相同的菜单项处于活动状态

我在我的

应用程序组件中有这样一个菜单。ts

：

<ul>
  <li>
    <a href="#" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
  </li>
  <li>
    <a href="#" routerLink="/shop" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Shop</a>
  </li>

</ul>
<router-outlet></router-outlet>

如您所见，我有“商店”和“细节”组件。通过单击一个简单的按钮，可以从商店页面访问详细信息组件。此时，菜单上的“我的活动状态”正确选择了商店商品，但当我单击“详细信息”按钮时，该状态不再处于活动状态。即使我在另一条路线上，是否可以在两个组件的菜单中保持活动状态

这里有一个例子

根据，您的批准应如下所示：

const routes: Routes = [
{ 
 path: 'shop',
 component: ChildComponent, 
  children: [
    {
      path: 'details', 
      component: DetailComponent
    }
   ] 
 }

---

但是，要在这里取得成功，您需要有两个

。一个在家里，另一个在商店里。

是

细节

独立于

商店

？它看起来应该是一条儿童路线，也可能是一条儿童路线。但是它不应该出现在菜单上（我指的是细节）。这样有两个问题。不幸的是，菜单似乎没有保持活动状态。第二个是，现在在shop组件中，当我单击按钮“转到详细信息”时，我还有详细信息组件。两者都有，而不仅仅是细节。我不知道你是否明白，对于Angular的最佳实践，我认为你的“细节”路线应该是“商店”的子路线。你可以用一个简单的*ngIf技巧解决第二个问题，当你点击按钮的时候。关于第一个问题，我正在尝试解决。解决：从您的商店中删除[routerLinkActiveOptions]=“{exact:true}”是的，它正在工作。问题解决了！非常感谢。仅供参考，我在这里看到了这些信息

const routes: Routes = [
{ 
 path: 'shop',
 component: ChildComponent, 
  children: [
    {
      path: 'details', 
      component: DetailComponent
    }
   ] 
 }