Question

我正在使用：

gotoAbout() {
   this.router.navigate(['/'], { fragment: 'about' })
}

因为如果我不在我的根/页面上，则routerLink和一个href =“＃about”重新加载我的页面。在导航按钮上使用此功能，它将在没有重新加载页面的情况下一键导航到/＃about但是问题是当我滚动离开它时，它根本不跳到那个div，就像href =“＃about”那样在页面上。有没有办法以角度来实现这个目标？

Answer 1

这看起来有点hacky但它确实有效：

在您的组件中

goToDiv(fragment: string): void {
    window.location.hash = fragment;
}

在模板中：

<a (click)="goToDiv('destination')">Go to div</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

编辑：正如@JB Nizet所述，您也可以尝试评论：

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

Answer 2

对于任何有兴趣的人，我的解决方案如下：

我的导航栏有一个'about'按钮，其中（click）=“gotoAbout（）;” ：

  gotoAbout() {
    let tree = this.router.parseUrl(this.router.url);
    if (tree.fragment == 'about') {
      let element = document.querySelector("#" + tree.fragment);
      if (element) {
        element.scrollIntoView(element);
      }
    }
    else {
      this.router.navigate(['/'], {fragment: 'about'})
        .then( () => {
          let tree = this.router.parseUrl(this.router.url);
          let element = document.querySelector("#" + tree.fragment);
          if (element) {
            element.scrollIntoView(element);
          }
        });
    }
  }

Angular 2相当于一个href =“＃someElementId”

2 个答案: