Prevent scroll to top before router navigate to another page when using angular 2 router resolve

Question

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?

Klemen Fajs · Accepted Answer · 2018-04-11 13:46:19Z

1

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

answered Apr 11, 2018 at 13:46

Klemen Fajs

1482 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent scroll to top before router navigate to another page when using angular 2 router resolve

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related