CODEWITHSUNDEEP
angularscrollangular2-routinginfinite-scroll
chenk
chenk

Reputation: 482

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

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?

Upvotes: 5

Views: 1453

Answers (1)

Klemen Fajs
Klemen Fajs

Reputation: 148

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

Upvotes: 1

Related Questions