我有一页包含部分和固定菜单。 当用户点击菜单项时,页面将滚动到相应的部分。
对于滚动,我使用 https://github.com/Nolanus/ng2-page-scroll
如何在单击时以及用户滚动到新部分时将“事件”类添加到菜单项?
编辑:
进度 - 在 Click 上添加“事件”类:
我的html:
<ul class="nav nav-menu">
<li class="" [class.active]="activeLink == 'item1'" (click)="setActiveLink('item1')">
<a pageScroll href="#item1">item 1</a>
</li>
</ul>
在我的组件中:
private activeLink: string = 'default-active-link';
setActiveLink(link: string){
this.activeLink = link;
}
但是如何让它在滚动时也能工作呢?
最佳答案
根据官方文档
RouterLinkActive 指令允许您在链接的路由变为事件状态时向元素添加 CSS 类。
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
When the url is either '/user' or '/user/bob', the active-link class will be added to the a tag. If the url changes, the class will be removed.
您可以设置多个类别,如下所示:
<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
您可以通过传递exact: true来配置RouterLinkActive。仅当 url 与链接完全匹配时才会添加类。
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>
关于jquery - 如何添加 'active' 类以与 Angular 2 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42373065/