如何添加“活动”类以与 Angular 2 链接答案

【问题标题】：How to add 'active' class to link with angular 2如何添加“活动”类以与 Angular 2 链接
【发布时间】：2017-02-28 21:00:07
【问题描述】：

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

对于滚动，我使用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 是您正在寻找的？

标签： jquery angular

【解决方案1】：

根据官方文档

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>

【讨论】：

这没有用，因为我不换页，一切都发生在一页上。

【解决方案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: `
        <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;
    }

【讨论】：