当子项处于活动状态时,使Angular路由器父项不活动

Mes*_*ese 3 router angular angular-router

我有一个导航栏作为路由器,有两个锚标签,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>
Run Code Online (Sandbox Code Playgroud)

app.routing

const appRoutes: Routes = [{
    path: "home", component: HomeComponent, children: [{
        path: "create", component: CreateComponent
    }]
}];
Run Code Online (Sandbox Code Playgroud)

目前的行为

访问/ home(仅通知主锚标记处于活动状态): 在此输入图像描述

访问/ home/create(注意两个锚标签都是活动的)在此输入图像描述

想要行为

访问/ home(仅通知主锚标记处于活动状态): 在此输入图像描述

访问/ home/create(通知仅创建标记处于活动状态):在此输入图像描述

我在家庭组件中遗漏了什么或者这是一种正常的行为吗?我不应该使用Create作为Home的孩子吗?

非常感谢你们.

Psy*_*nze 9

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