首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在导航栏中显示当前部分

在导航栏中显示当前部分
EN

Stack Overflow用户
提问于 2016-09-06 02:25:47
回答 1查看 128关注 0票数 0

在我的应用程序(Angular2 RC6)中,我有一个导航栏,其中包含应用程序的所有部分。当我点击一个部分时(或者如果我在url中指定了部分),我需要突出显示该部分。

为了达到这个目的,我使用了类似这样的东西:

代码语言:javascript
复制
router.events.subscribe (e => 
{
    if (!(e instanceof NavigationEnd))
        return;

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

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

代码语言:javascript
复制
if (path == "/main/users")
    highlightUsersSection();
if (path == "/main/blabla")
    highlightBlaBlaSection();

此外,我应该这样做两次,因为我突出显示了节,而且我还在页脚中写下了节的名称。

EN

回答 1

Stack Overflow用户

发布于 2016-09-06 04:07:18

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

下面是一个例子:

代码语言:javascript
复制
template: `
  <nav>
    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
`,
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39335932

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档