Question

在我的应用程序（Angular2 RC6）中，我有一个包含应用程序所有部分的导航栏。当我点击一个部分（或者如果我在网址中指定部分）时，我需要突出显示该部分。

为了达到这个目的，我使用了类似的东西：

router.events.subscribe (e => 
{
    if (!(e instanceof NavigationEnd))
        return;

    this.sectionChanged.emit (e.url);
})

这种方法的问题是e.url是一个字符串，将该字符串与所有路径进行比较是很无聊的：例如

if (path == "/main/users")
    highlightUsersSection();
if (path == "/main/blabla")
    highlightBlaBlaSection();

此外我应该这样做2次，因为我高亮显示该部分，并且我也在页脚中写了部分名称。

Answer 1

您可以使用routerLinkActive指令。当链接的路由变为活动状态时，它会向元素添加CSS类。

以下是一个例子：

template: `
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
`,

在导航栏中显示当前部分

1 个答案: