如何使用锚点跳转在 Angular 4 中设置 Bootstrap 导航栏“活动”类？答案

【问题标题】：How to set Bootstrap navbar “active” class in Angular 4 using anchor jump?如何使用锚点跳转在 Angular 4 中设置 Bootstrap 导航栏“活动”类？
【发布时间】：2018-01-08 10:56:55
【问题描述】：

我查看了这个问题：How to set Bootstrap navbar “active” class in Angular 2?，它显示了如何链接到单独的页面。但是，就我而言，我想使用锚链接到同一页面上的某个部分。

在下面提到的代码中，它没有转义字符串插值。

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"> <a [routerLink]="['#'+sectionName]">One</a></li>
  ...
</ul>

其呈现为href="/%23Home" 而不是href="#Home"

【问题讨论】：

标签： twitter-bootstrap angular angular-router

【解决方案1】：

在您的链接中使用 'fragment="sectionName"'：

<a [routerLink]="['/']" fragment="education">
  link to user component
</a>

输出：/#education

【讨论】：

【解决方案2】：

只需将值绑定到href 属性，而不是使用routerLink 指令。

<a [href]="'#'+sectionName">One</a>

或者您可以构建自己的指令：

@Directive({
  selector: 'a[anchorLink]'
})
export class AnchorLinkDirective {
  @Input()
  @HostBinding('attr.href')
  public get anchorLink() {
    return '#' + this.link;
  }

  public set anchorLink(value: string) {
    this.link = value;
  }

  @Input()
  public anchorLinkActive: string;

  private link: string;
  private ngUnsubscribe$ = new Subject();

  constructor(private router: Router, private renderer: Renderer2, private element: ElementRef) {
    this.router.events.takeUntil(this.ngUnsubscribe$).subscribe(e => {
      if(e instanceof NavigationEnd) {
        let parts = e.urlAfterRedirects.split('#');
        let element = this.element.nativeElement as HTMLElement;
        if(this.anchorLinkActive && parts[parts.length - 1] === this.link) {
          this.renderer.addClass(element, this.anchorLinkActive);
        } else if(element.classList.contains(this.anchorLinkActive)) {
          this.renderer.removeClass(element, this.anchorLinkActive);
        }
      }
    });
  }

  ngOnDestroy() {
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
  }
}

注意：此指令非常基本，不涉及 anchorLinkActive 输入的更改。

【讨论】：

实际上，我还想在用户单击并导航到特定部分时将类设置为活动状态，这就是我尝试使用routerLink 的原因。