I have a div tag with router link. When click div tag, it should navigate to another page. Also I am using router Resolve to fetch data before router activated.
{ path: 'conversation/:id', component: InboxDetailComponent, resolve: { conversation: InboxConversationResolver }}
This is how div tag is appearing.
<div class="list-group-item" *ngFor="let conversation of conversations; let j = index;" [routerLink]="['/app/inbox/detail',conversation.items[0].id]"></div>
Everything is working fine except one thing. When click div tag, page scrolls to top before navigate to another page. How to fix this?
I had the exactly same problem, but then i remembered I implemented the following in my app.component's constructor:
this.router.events.subscribe(
() => window.scrollTo(0, 0)
);
All I had to to was wait for the NavigationEnd event, instead of scrolling to the top on the first event that came through. So I implemented it like this:
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0);
});