当我从一个组件路由到另一个组件时,页面不会回到顶部,这是在Angular 4(现在是5)中发生的。
在Angular 4(现在是5)中,当从一个组件导航到另一个组件时,页面无法滚动到顶部。解决这个问题的方法是,确保在导航之后取消订阅。通过取消订阅,可以确保不会破坏默认的“返回”按钮行为。
解决方法如下:
subs: Subscription; constructor(private router: Router) { } ngOnInit() { this.subs = this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } window.scrollTo(0, 0) // 例如 this.subs.unsubscribe(); }); }
需要注意的是,`window.scrollTo(0, 0)`在Angular 5和6中不起作用。
在Angular 4(现在的5)中,当从一个组件导航到另一个组件时,页面不会滚动到顶部的问题是由于路由变化时没有相应的滚动处理机制导致的。解决方法是注册一个路由变化的监听器,在路由变化时手动将页面滚动到顶部。
通过在app-component.ts文件中添加以下代码片段,可以实现路由变化时页面滚动到顶部的效果:
constructor(private router: Router) { } ngOnInit() { this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } window.scrollTo(0, 0) // for example }); }
但是,这种解决方法存在一个问题,即如果回到上一个组件,页面会滚动到上一个组件的顶部,这是不正确的。这意味着该代码会在所有路由变化时都将页面滚动到顶部,这破坏了默认的“返回”按钮行为。返回应该记住上一个滚动位置。
因此,为了解决这个问题,可以通过在路由变化时判断是否回到了上一个组件,如果是的话,不执行滚动到顶部的操作。这样就可以保持正确的“返回”按钮行为。
以下是修改后的代码:
constructor(private router: Router) { } ngOnInit() { let previousUrl = this.router.url; this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } if (this.router.url !== previousUrl) { window.scrollTo(0, 0); // for example } previousUrl = this.router.url; }); }
通过上述修改,现在当从一个组件导航到另一个组件时,页面会滚动到顶部,但如果回到上一个组件,页面不会滚动到上一个组件的顶部,保持了正确的“返回”按钮行为。
Angular 4和5版本中,当从一个组件路由到另一个组件时,页面没有自动滚动到顶部。这个问题在Angular 6.1版本中得到了解决,解决方法是使用scrollPositionRestoration
选项。
具体解决方法可以参考下面的答案: