在以角度导航时，页面不会滚动到顶部

Question

在我的应用程序中，当路由URL时，加载的页面不会自动滚动到顶部。它与前一个屏幕保持相同的位置。

Answer 1

在app component中试试这个：

的 TS：

import { Router ,NavigationEnd} from '@angular/router';
export class AppComponent{
    constructor(private router: Router) {}

    ngOnInit() {
      this.router.events.subscribe((event: NavigationEnd) => {
        if(event instanceof NavigationEnd) {
          window.scrollTo(0, 0);
        }
      })
    }
}

<强> HTML：

<router-outlet></router-outlet>

Answer 2

在你的app.component.ts

中试试这个

import { Component } from '@angular/core'; 
import { Router, NavigationEnd } from '@angular/router'; 
import { Subscription } from 'rxjs/Rx';

@Component({
    moduleId: module.id, 
    selector: ‘my-app’,
    template: `<router-outlet></router-outlet>`
})

export class AppComponent {
    routerSubscription: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerSubscription = this.router.events
            .filter(event => event instanceof NavigationEnd)
            .subscribe(event => {
                document.body.scrollTop = 0;
            });
    }

    ngOnDestroy() {
        this.routerSubscription.unsubscribe();
    }
}

从app.component.html

中删除<router-outlet></router-outlet>