角度2滚动到路线更改的顶部

发布时间：2020-12-17 08:17:49 所属栏目：安全来源：网络整理

导读：在我的Angular 2应用程序中，当我向下滚动一个页面并点击页面底部的链接，它会改变路线，并带我到下一页，但不滚动到页面的顶部。结果，如果第一页是冗长的，第二页的内容很少，则给人的印象是第二页缺少内容。由于内容只有在用户滚动到页面顶部时才可见。

在我的Angular 2应用程序中，当我向下滚动一个页面并点击页面底部的链接，它会改变路线，并带我到下一页，但不滚动到页面的顶部。结果，如果第一页是冗长的，第二页的内容很少，则给人的印象是第二页缺少内容。由于内容只有在用户滚动到页面顶部时才可见。

我可以将组件的ngInit中的窗口滚动到页面顶部，但是有没有更好的解决方案可以自动处理我的应用程序中的所有路线？

您可以在主要组件上注册一个路由更改侦听器，并滚动到路由更改的顶部。

import { Component,OnInit } from '@angular/core';
import { Router,NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',template: '<ng-content></ng-content>',})
export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!