Question

我正在尝试制作一个根据当前路线突出显示的子导航。 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。

Answer 1

当您导航到faction时，

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

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

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

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

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

1 个答案: