页面内链接重新加载页面 [英] In page link reloads page

问题描述

我正在构建我的第一个Angular 2应用程序，并且已经有了一个不错的Webpack构建系统，路由，服务和组件。

I'm building my first Angular 2 app and I've come quite far now with a nice Webpack build system, routing, services and components in place.

我尝试在其中一个组件中添加普通的页面链接（ [href ^ =＃] ），只要我在主页上（ / ）可以正常工作，但是每当我使用其他URL时，整个应用程序都会重新加载到首页。

I tried adding a normal in page link ([href^="#"]) in one of my components, and as long as I'm on the home page (/) it works fine, but whenever I'm on a different URL the whole app reloads to the home page.

显然这是一个已知问题（ https://github.com/angular/angular/issues/6595 ），但我现在需要立即执行此操作，以便希望有人可以教我如何操作。

Apparently this is a known issue (https://github.com/angular/angular/issues/6595) but I need this to work right now so I'm hoping someone can teach me how.

我不确定这会有所帮助，但是这是我组件的TS和HTML：

I'm not sure it'll help, but here's my Component's TS and 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>

如您所见，它是这里的工作原理链接（或页面中的其他链接-实际上，我不止这一个功能，它仅在您位于主页（ / ）时才有效（向下滚动到链接的元素）。

As you can see it's the link "here's how it works" (or any other in page link - I have more than this one in reality) that only works (scrolls down to the linked element) when you're on the home page (/). If on any other URL, the link will reload the app.

推荐答案

不幸的是，我ve还了解了尝试使用angular2开发一个真实世界的应用程序的艰难方法，即您确实应该与当前开发保持尽可能的距离，尤其是在路由器方面。

Unfortunately, I've also learnt the hard way trying to develop a real-world app with angular2 before its release that you really should stay as far away from the current development as possible, especially in terms of the router(s).

路由器的第三次迭代目前处于极高的Alpha状态，我遇到了很多问题，不得不恢复其实现，正如您可能知道的那样，它的工作量很大。 API发生了很大变化。

The third iteration of the router is currently extremely alpha and I've run across so many issues that I've had to revert its implementation which as you likely know is quite a bit of work as the API has changed considerably.

不过，就您的问题而言，我实际上还没有发现任何路由器都能正确实现散列，因此我不得不通过以下类似的滚动组件解决此问题：

As far as your issue is concerned though, I haven't actually found that any of the routers actually implement hashes correctly and I've had to get around this with a scroll component that looks something like the below:

@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);
          }
      });
    }
  }
}

您可以添加此指令到给定页面上的元素。

You can then add this directive to an element on the given page.

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

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

I hope this helps you solve your issue for the time being!

这篇关于页面内链接重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！