在页面的链接重新加载页面

Question

我建设我的第一个角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

不幸的是，我还学会了硬盘的方式试图发展与angular2其释放，你真的应该留远从目前的发展之前尽可能真实世界的应用，特别是在路由器（或多个）的条款。

路由器的第三次迭代是目前非常阿尔法和我经历了，我已经有恢复其执行正如你可能知道的是相当多的工作作为API的已发生很大变化这么多的问题上运行。

至于你的问题而言，虽然，我没有真正发现任何路由器实际上正确的实现哈希和我不得不解决这个问题有涡旋部件，看起来像下面：

@Directive({
  selector: '[scroll-to-target-on-event]'
})
export class ScrollToTargetOnEventDirective {

  @Input('scroll-to-target-on-event') configs:Array<{target:Element, event:string}>;

  constructor(private _element:ElementRef) {
  }

  ngOnInit() {

    for (let config of this.configs) {
      this._element.nativeElement.addEventListener(config.event, () => {
          // Get the position of the target relative to the entire page. getBoundingClientRect is relative to the
          // viewport so to get relative to the entire page we subtract the body (as we're looking to use scrollpos)
          var targetYPos = config.target.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

          // If the target position is below the bottom of the viewport then scroll to it. (This should actually
          // check above as well, haven't implemented it though)
          if (targetYPos > (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight|| window.innerHeight)) {
            window.scrollTo(0, config.target.getBoundingClientRect().top - document.body.getBoundingClientRect().top);
          }
      });
    }
  }
}

然后，您可以将此指令添加到一个元素指定页面上。

<a href="" [scroll-to-target-on-event]="[{target: '#id-of-target-element', event:'click'}]">Link</a>

我希望这可以帮助您解决问题暂且！

Answer 2

在路由器的当前版本 - 版本3.0.0-alpha.8 - 有乱码片段添加到您的联系方式。然而，角队仍然有一些工作要做，使其正常运行。

在你的锚元素中，添加与哈希值fragment属性。

如果你想生成本地链路，只需使用这个符号：

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

如果你是在该位置

www.example.org/Comp1/Comp2

之前，这将改变网址

www.example.org/Comp1/Comp2#Test

链接到另一个组件时，这也将工作：

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

这将带你到

www.example.org/Comp1/Comp2/Comp3#Test

However...

目前似乎仍然是在角度的实现中的错误。虽然产生并在浏览器的地址栏中正确更新链接时，浏览器不跳转到指定的哈希位置。它不仅会说，当你将光标移动到地址栏并回车，这显然于事无补。

我再次评价了@powerbuoy和@君特 - Zöchbauer引用GitHub的职位给予角队在头顶上的问题。

Answer 3

如果你不希望任何修改：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
  }
}

Answer 4

https://github.com/angular/angular/issues/6595最近被固定，将被列入下一个版本（可能是今天）