首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 9每次更改都会滚动到路线顶部

在 Angular 9 中,当路由发生变化时,页面会自动滚动到顶部

  1. 打开 app.component.ts 文件。
  2. 在文件的顶部,确保导入了 RouterActivatedRoute: import { Router, ActivatedRoute } from '@angular/router';
  3. AppComponent 类的构造函数中,注入 RouterActivatedRoute: constructor(private router: Router, private route: ActivatedRoute) {}
  4. ngOnInit() 生命周期钩子中,监听路由变化事件,并在路由发生变化时滚动到页面顶部: import { HostListener } from '@angular/core'; @HostListener('window:scroll', ['$event']) onWindowScroll(event) { if (event.target === document.documentElement) { document.documentElement.scrollTop = 0; } } ngOnInit() { this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { window.scrollTo(0, 0); } }); } 这里,我们使用 HostListener 监听窗口滚动事件,并在滚动时将页面滚动到顶部。同时,在 ngOnInit() 生命周期钩子中,我们订阅路由变化事件,当路由发生变化时,使用 window.scrollTo(0, 0) 将页面滚动到顶部。

现在,当路由发生变化时,页面会自动滚动到顶部。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券