从地址栏调用路由时,未设置Angular4 routerLinkActive

时间:2017-08-31 11:24:49

标签: angular angular2-routing

我正在尝试制作一个根据当前路线突出显示的子导航。 html文件定义为

https://github.com/SayakMukhopadhyay/elitebgs/blob/7e6da91ca51f4d98c8553c84a02f755b30caf10d/src/app/main/main.component.html

我的问题是当我使用链接前往路由/faction/:id时,routerLinkActive正确地保持活动类。但是,如果我直接从地址栏前往路线,则不会指定active类进行突出显示。我猜这是关于不正确的事件顺序的一些问题。我错过了什么?

编辑:所以我为chrome安装了Augury扩展并检查了源代码。当我通过链接前往路线/faction/:id时,RouterLinkActive.active将成为true,但在从地址栏调用相同路线时,它会变为false

1 个答案:

答案 0 :(得分:0)

当您导航到faction时,

Ofc faction/:id将无法激活,您为这些路径定义了两条完全不同的路线:

        {
            path: 'faction',
            component: FactionListComponent
        },
        {
            path: 'faction/:factionid',
            component: FactionViewComponent
        }

要存档您想要的内容,您可以使用以下内容作为起点:

       {
            path: 'faction',
            children: [
              {path: '',component: FactionListComponent},
              {path:':id',component: FactionViewComponent}
            ]
        }