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

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

如果您不想修改任何内容：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 3

在当前发布的路由器版本3.0.0-alpha.8中，有一种方法可以向链接中添加散列片段。然而，有角的团队仍有一些工作要做，以使其正常运作。

在锚元素上，添加一个带有散列值的fragment属性。

如果要生成本地链接，只需使用以下符号：

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

如果你在那个地方

www.example.org/Comp1/Comp2

在此之前，这将将URL更改为

www.example.org/Comp1/Comp2#Test

当链接到另一个组件时，这也会起作用：

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

这会带你去

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

然而..。

在角的实现中似乎仍然有一个缺陷。虽然在浏览器的地址栏中正确生成和更新链接，但浏览器不会跳转到指定的哈希位置。只有当您将光标移动到地址栏并点击enter时，它才会这样做，这显然没有帮助。

我再次评论了由@powerbuoy和@Günter chbauer引用的github帖子，让角质小组在这个问题上有一个头绪。