为 Angular Child 路线添加 scrollPositionRestoration

Question

在我的 Angular 6 应用程序中，当我向下滚动页面并单击页面底部的 link 时，它确实改变了路线并带我进入下一页，但它没有滚动到页面顶部。因此，如果第一页（PARENT）很长，第二页（CHILD）内容很少，给人的印象是第二页没有内容。因为内容只有在用户滚动到页面顶部时才可见。

我尝试为 child 添加 "scrollPositionRestoration"，例如，

@NgModule({
  imports: [RouterModule.forChild(routes, {
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})

这给我的错误是：

(property) scrollPositionRestoration: string
Expected 1 arguments, but got 2.

如何解决这个问题？有什么想法可以滚动到 Angular Child 组件的页面顶部吗？

Answer 1

如果全部失败，则在顶部（或所需的滚动位置）创建一些空的 HTML 元素（例如：div），模板上的 id="top"（或父模板):

<div id="top"></div>

并且在组件中：

ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
  }

Answer 2

我假设您已经在 AppRoutingModule 中添加了 scrollPositionRestoration 选项，如下所示：

...

@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

如果您的样式表中有以下代码：

html,
body {
  height: 100%;
}

您的滚动到顶部会中断！ ¡#$%&*+@#!

您可以删除此属性或者将您的代码更改为：

html {
  min-height: 100%;
  display: flex;
}
body {
  min-height: 100%;
  flex: 1;
}

注意！ 更改样式表时要小心，因为它可能会破坏其他东西...

Answer 3

使用 ViewportScroller

ts:

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller){
}

public scrollTo(anchor: string): void { // for calling to anchors
    this.viewportScroller.scrollToAnchor(anchor);
}

ngOnInit(){
    this.viewportScroller.scrollToPosition([0, 0]);
}

html:

<div id="srollingEl"></div>
<button (click)="scrollTo('srollingEl')"></button>

为 Angular Child 路线添加 scrollPositionRestoration

scrollPositionRestoration adding for Angular Child Route

scroll

components

parent-child

angular