angular - 当 Angular 路由器的子级处于事件状态时,使 Angular 路由器的父级不处于事件状态

标签 angular router angular-router

我有一个导航栏作为路由器,有两个 anchor 标记,Home 和 Create,Create 是 Home 的子级。我希望在选择 Create anchor 标记时使其处于事件状态,但 Home anchor 也会处于事件状态,因为它是 Create 的父级。

有什么方法可以防止父 anchor 标记在子 anchor 标记处于事件状态时激活吗?

主页.组件

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

应用程序路由

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

当前行为

访问/home(注意只有 home anchor 标记处于事件状态): enter image description here

访问/home/create(注意两个 anchor 标记都处于事件状态)enter image description here

想要的行为

访问/home(注意只有 home anchor 标记处于事件状态): enter image description here

访问/home/create(注意只有创建标签处于事件状态):enter image description here

我是否在主页组件中遗漏了某些内容,或者这是正常行为,并且我不应该将 Create 用作 Home 的子组件?

非常感谢大家。

最佳答案

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

关于angular - 当 Angular 路由器的子级处于事件状态时,使 Angular 路由器的父级不处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48905444/

相关文章:

javascript - Angular - 创建 JSON 对象来存储与每个路由关联的数据

Angular :替换 url 中的段

view - 路由器导航后未呈现 SAPUI5/OpenUI5 View

javascript - 推送到 GH 页面时 IndexRoute 不显示

javascript - Express.js Routing 错误的路由

Angular LoadChildren 字符串格式已弃用,但函数格式会导致错误

javascript - 如何在通用验证器类 Angular2 中实现自定义验证器?

html - 如何使用 ionic 制作 pdf 生成器?

angular - 如何检查 RxJS Observable 是否包含 Angular2 中的字符串?

unit-testing - 模拟 router.events.subscribe() Angular2