我有一个页面包含部分和固定菜单。 当用户点击菜单项时,页面将滚动到相应的部分。
对于滚动,我使用https://github.com/Nolanus/ng2-page-scroll
如何添加'有效'当用户滚动到新部分时,类到菜单项?
编辑:
进度 - 添加“活跃”'上课时点击:
我的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;
}
但是如何让它在滚动上工作呢?
答案 0 :(得分:1)
根据官方文件
当LinkLink的路由变为活动状态时,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>
答案 1 :(得分:1)
你可以使用角度动画在twostates之间转换:
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: `
<ul>
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
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;
}
还可以参考此链接了解更多详情: