javascript - 页面内链接重新加载页面

Question

我正在构建我的第一个 Angular 2 应用程序，现在已经有了一个很好的 Webpack 构建系统、路由、服务和组件。

我尝试在我的一个组件中添加一个普通的页面链接 ([href^="#"])，只要我位于主页 (/)它工作正常，但每当我使用不同的 URL 时，整个应用程序都会重新加载到主页。

显然这是一个已知问题( https://github.com/angular/angular/issues/6595 )，但我现在需要它才能工作，所以我希望有人可以教我如何操作。

我不确定它是否有帮助，但这是我的组件的 TS 和 HTML:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';

@Component({
    selector: 'home',
    template: require('./home.component.html'),
    directives: [ROUTER_DIRECTIVES]
})
export class HomeComponent {

}

<section id="home" class="section section--full-height">

    <h2>Title of the home page</h2>

    <nav>
        <a [routerLink]="['Search']" class="button button--wide">Search</a>
        <a [routerLink]="['Search']">Quick try</a>
    </nav>

    <footer>
        <a href="#home-2" class="icon-down icon--below">Heres how it works</a>
    </footer>

</section>

<section id="home-2" class="section section--full-height">

    <h2>Lorem ipsum dolor</h2>

    <img src="http://placehold.it/200x300">

</section>

正如您所看到的，只有当您位于主页 (/)。如果位于任何其他 URL，该链接将重新加载应用程序。

Answer 1

如果您不想修改任何内容:PLUNKER DEMO

只需将此指令放入您的组件中即可完成。

@Directive({
  selector: 'a[href^=#]',
  inputs: ['href'],
  host: {
    "(click)": "linkClicked($event)"
  }
})
export class InPageLinks {
  href: string;

  linkClicked(e){ // handles click event, only prevents the links with a # in the beginning

      e.preventDefault();
      this.scrollToID(this.href);
  }

  scrollToID(id){ // scrolls to the given id
    let target = document.querySelector(id);

    document.body.scrollTop = target.offsetTop;  
    // current scroll-target is body, you can take another input if you want
  }
}