Angular 2中与a href="#someElementId"等效的方法

Question

Angular 2中与a href="#someElementId"等效的方法

3

我正在使用：

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

因为routerLink和a href="#about"会在我不在我的根/页面时重新加载我的页面。使用此函数在导航按钮上，它将在单击时导航到/#about而不重新加载页面，但问题是它根本没有像a href="#about"一样跳转到该div，当我从页面上滚动时。在Angular中有实现这个的方法吗？

- seanEd

https://dev59.com/YloV5IYBdhLWcg3weevH - yurzui

从文档中可以了解到，您可以按如下方式设置查询参数和片段： - JB Nizet

我正在尝试从url.com/somethingelse/somethingelse跳转到url.com/#about并跳转到id为"about"的div。因此，我需要一个非重新加载的路由器返回到/#about，然后进行div跳转。debug:true;是什么意思？它会在参数中设置?debug=true还是在路由后进行片段跳转？ - seanEd

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mickdev · Answer 1

这似乎有点取巧，但它可以工作：

在你的组件中

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

- seanEd · Answer 2

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

我的导航栏有一个名为“关于”的按钮，它的点击事件是 (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);
          }
        });
    }
  }