1

我看了这个问题：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"

4

2 回答 2

1

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

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

输出：/#教育

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

于 2017-09-21T17:42:22.620 回答
0

只需将值绑定到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输入的更改。

于 2017-08-01T14:12:34.103 回答