Angular2使用标签到页面锚的路由

Question

我希望在我的Angular2页面上添加一些链接，当单击时，这些链接将跳转到页面中的特定位置，就像普通的hashtags所做的那样。所以链接应该是这样的

/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes

等等。

我不认为我需要HashLocationStrategy，因为我对正常的Angular2方式很好，但是如果我直接添加，链接实际上会跳转到根，而不是在同一个页面上的某个地方。任何方向都很感激，谢谢。

Answer 1

尽管甘特的回答是正确的，但它并没有涵盖“跳转到”锚标签部分。

因此，除此之外：

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

...在需要“跳转”行为的组件（父组件）中，添加：

import { Router, NavigationEnd } from '@angular/router';

class MyAppComponent {
  constructor(router: Router) {

    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(true); }
        }
      }
    });

  }
}

请注意，这是一个解决办法！请关注此github问题，以了解未来的更新。感谢Victor Savkin提供的解决方案！

Answer 2

很抱歉，回答有点晚；在角度布线文档中有一个预定义的函数，它可以帮助我们使用标签到页面锚定进行布线，即锚定crolling:“enabled”

Step-1：-首先导入app.module.ts文件中的RouterMoules：-

imports:[ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot(routes,{
      anchorScrolling: 'enabled'
    })
  ],

步骤2：-转到HTML页面，创建导航并添加两个重要属性，如[routerLink]和fragment，以匹配相应的Div ID：-

<ul>
    <li> <a [routerLink] = "['/']"  fragment="home"> Home </a></li>
    <li> <a [routerLink] = "['/']"  fragment="about"> About Us </a></li>
  <li> <a [routerLink] = "['/']"  fragment="contact"> Contact Us </a></li>
</ul>

步骤3：-通过将ID名称与片段匹配来创建节/div：-

<section id="home" class="home-section">
      <h2>  HOME SECTION </h2>
</section>

<section id="about" class="about-section">
        <h2>  ABOUT US SECTION </h2>
</section>

<section id="contact" class="contact-section">
        <h2>  CONTACT US SECTION </h2>
</section>

为了供您参考，我通过创建一个小演示添加了下面的示例，该演示有助于解决您的问题。

演示：https://routing-hashtag-page-anchors.stackblitz.io/

Answer 3

最新消息

这一点现在得到了支持

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

将以下代码添加到组件以滚动

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

起初的

这是一个已知问题，在https://github.com/angular/angular/issues/6595