时间戳

首页 > 解决方案 > 在我的 Angular Nebular 应用程序中，Typescript 中没有自动滚动功能

angular - 在我的 Angular Nebular 应用程序中，Typescript 中没有自动滚动功能

问题描述

我有一个问题，在 router.navigatedByUrl("") 之后，我想再次滚动到顶部。

我尝试了以下所有方法都不起作用：

  1. window.scroll(0,0);
  2. document.body.scrollTop = 0;
  3. document.querySelector('body').scrollTo(0,0);
  4. NbLayoutScrollService.scrollTo(0,0); // 用于滚动的星云服务
  5. viewportScroller.scrollToPosition([0, 0]);
  6. document.querySelector().scrollTo(0,0); /* 因为我读到 Angular 8 中的材质存在问题，其中滚动挂钩必须位于与正文不同的 html 元素上 */

我在 this.router.events.subscribe((evt) => { ... }; 中尝试了这些方法，并且还使用了以下方法：

<router-outlet (activate)="onActivate($event)"></router-outlet>
  onActivate(event) {
    ...
   }

路由器事件甚至没有触发，但第二种方法触发但滚动方法不起作用。

我收到警告“在路由激活期间没有实例化路由器出口。URL 段：”，这可能是滚动不起作用的原因吗？

该应用程序在 Angular 版本 10.1.1 上运行，我很乐意就如何研究此问题提出任何建议，但目前我处于死胡同。

标签： angulartypescriptangular-materialangular-routingnebular

解决方案

您可以在 onActivate 方法中使用以下代码返回顶部

onActivate(event) {
 window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16);
}

推荐阅读