angular - 使用 Angular 2 路由器解析时，防止在路由器导航到另一个页面之前滚动到顶部

Question

我有一个带有路由器链接的 div 标签。当点击 div 标签时，它应该导航到另一个页面。我还在路由器激活之前使用路由器解析来获取数据。

{ path: 'conversation/:id', component: InboxDetailComponent, resolve: { conversation: InboxConversationResolver }}

这就是 div 标签的显示方式。

<div class="list-group-item" *ngFor="let conversation of conversations; let j = index;" [routerLink]="['/app/inbox/detail',conversation.items[0].id]"></div>

除了一件事之外，一切都工作正常。当单击 div 标签时，页面会滚动到顶部，然后导航到另一个页面。如何解决这个问题？

Answer 1

我遇到了完全相同的问题，但后来我记得我在 app.component 的构造函数中实现了以下内容:

this.router.events.subscribe(
        () => window.scrollTo(0, 0)
    );

我所要做的就是等待 NavigationEnd 事件，而不是在第一个事件发生时滚动到顶部。所以我是这样实现的:

this.router.events.subscribe((evt) => {
        if (!(evt instanceof NavigationEnd)) {
            return;
        }
        window.scrollTo(0, 0);
    });