如何添加'active'类以与angular 2链接 [英] How to add 'active' class to link with angular 2

问题描述

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

I have one page with sections and fixed menu. When user clicks on menu item, the page will scroll to corresponding section.

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

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

How do I add 'active' class to menu item on click and also when user scrolls to new section?

编辑：
进度 - 添加'活动'上课时点击：

我的html：

Progress -- add 'active' class on Click:
My 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;
}

但是如何让它在滚动上运行？

But how to get it working also on scroll?

推荐答案

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

you can use the angular animation for Transitioning between 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;
    }

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

can also refer to this link for more details:

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

这篇关于如何添加'active'类以与angular 2链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！