如何添加’active’类来链接角度2

我有一个页面和部分和固定菜单。 当用户点击菜单项时，页面将滚动到相应的部分。

对于滚动，我使用https://github.com/Nolanus/ng2-page-scroll

如何在点击时将“活动”类添加到菜单项，以及当用户滚动到新部分时？

编辑：进度 – 在Click上添加’active’类：
我的HTML：

 
 item 1 
  

在我的组件中：

 private activeLink: string = 'default-active-link'; setActiveLink(link: string){ this.activeLink = link; } 

但是如何让它在滚动上工作呢？

Answer 1

根据官方文件

RouterLinkActive指令允许您在链接的路由变为活动状态时向元素添加CSS类。

 Bob 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. 

您可以设置多个类，如下所示：

 Bob Bob 

您可以通过传递exact：true来配置RouterLinkActive。 仅当url与链接完全匹配时，才会添加类。

 Bob 

Answer 2

你可以使用角度动画在两个转换之间转换：

 import { Component, Input, trigger, state, style, transition, animate } from '@angular/core'; import { Heroes } from './hero.service'; @Component({ moduleId: module.id, selector: 'hero-list-basic', template: ` 
 
 {{hero.name}} 
 
 `, styleUrls: ['./hero-list.component.css'], animations: [ trigger('heroState', [ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]) ] }) export class HeroListBasicComponent { @Input() heroes: Heroes; } 

也可以参考此链接了解更多详情：

https://angular.io/docs/ts/latest/guide/animations.html