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

前端之家收集整理的这篇文章主要介绍了角度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)
        });
    }
}
原文链接:https://www.f2er.com/angularjs/144758.html

猜你在找的Angularjs相关文章