Question

我查看了这个问题：How to set Bootstrap navbar “active” class in Angular 2?，其中显示了如何链接到单独的页面。但是，在我的情况下，我想使用锚点链接到同一页面上的部分。

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

print length($2)

呈现为<ul class="nav navbar-nav"> <li [routerLinkActive]="['active']"> <a [routerLink]="['#'+sectionName]">One</a></li> ... </ul>而不是href="/%23Home"

Answer 1

在你的链接中使用'fragment =“sectionName”'：

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

输出： /＃education

更多信息：https://angular.io/api/router/RouterLink

Answer 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输入的更改。

如何使用锚点跳转在Angular 4中设置Bootstrap navbar“active”类？

2 个答案: