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.
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.
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.
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.