使 Angular 路由器父节点在其子节点处于活动状态时不活动

Question

我有一个导航栏作为路由器，有两个锚标记，Home 和 Create，Create 是 Home 的子项。我想让 Create 锚标记在被选中时处于活动状态，但是 Home 锚标记也处于活动状态，因为它是 Create 的父级。

有什么方法可以阻止父锚标记在子标记激活时激活？

Home.component

<ul class="nav navbar-nav">
   <li [routerLink]="'/home'" routerLinkActive="active">
       <a>Home</a>
   </li>
   <li [routerLink]="'create'" routerLinkActive="active">
       <a>Create</a>
    </li>
</ul>

app.routing

const appRoutes: Routes = [{
    path: "home", component: HomeComponent, children: [{
        path: "create", component: CreateComponent
    }]
}];

当前行为

正在访问 /home（注意只有主页锚标签处于活动状态）：

正在访问 /home/create（注意两个锚标记都处于活动状态）

通缉行为

正在访问 /home（注意只有主页锚标签处于活动状态）：

正在访问 /home/create（注意仅创建标签处于活动状态）：

我是否遗漏了 home 组件中的某些内容，或者这是正常行为，我不应该将 Create 用作 Home 的子组件吗？

非常感谢大家。

Answer 1

添加：[routerLinkActiveOptions]="{exact: true}"

使 Angular 路由器父节点在其子节点处于活动状态时不活动

Make Angular router parent not active when it children are active

router

angular

angular-router