scrollPositionRestoration 添加到 Angular 子路由中。

15 浏览
0 Comments

scrollPositionRestoration 添加到 Angular 子路由中。

在我的Angular 6应用程序中，当我向下滚动页面并点击页面底部的链接时，它确实改变了路由并带我到下一页，但它没有滚动到页面的顶部。结果就是，如果第一个页面（父页面）很长而第二个页面（子页面）的内容很少，就会给人一种第二个页面内容不足的印象。因为只有当用户滚动到页面顶部时才能看到内容。\n我尝试为子页面添加\"scrollPositionRestoration\"，如下所示：\n

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

\n这给我带来了错误：\n

(property) scrollPositionRestoration: string
预期1个参数，但得到了2个。

\n如何解决这个问题？有什么办法使Angular子组件滚动到页面顶部？

0

3 答案

0 Comments

Angular的Child Route中出现了scrollPositionRestoration的问题。scrollPositionRestoration是Angular的一个特性，它用于在页面导航后自动将滚动条位置恢复到之前的位置。

在这个特定的情况下，问题出现在Child Route中。Child Route是指在父级路由下的子级路由。当从父级路由导航到子级路由时，滚动条位置没有被正确地恢复，而是保持在之前的位置，这可能导致用户在查看页面时无法正确地浏览内容。

为了解决这个问题，可以使用ViewportScroller这个类。ViewportScroller是Angular提供的一个服务，它用于控制滚动条的位置。

首先，在组件的构造函数中引入ViewportScroller服务，并在构造函数中初始化它。然后，可以使用scrollTo方法来调用指定锚点的滚动。在ngOnInit生命周期钩子中，可以使用scrollToPosition方法将滚动条位置恢复到[0, 0]的位置。

以下是解决问题的示例代码：

ts:

import { ViewportScroller } from '/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:

通过使用ViewportScroller服务并调用相应的方法，可以确保在Angular的Child Route中正确恢复滚动条位置，从而解决scrollPositionRestoration的问题。

0
0 Comments

在Angular中，当路由切换时，页面的滚动位置并不会自动恢复到之前的位置。这可能会导致用户在浏览网页时的不便。为了解决这个问题，我们可以通过添加scrollPositionRestoration配置来自动恢复滚动位置。

但是，在某些情况下，scrollPositionRestoration配置可能无效。这时，我们可以采用另一种方法来解决这个问题。

首先，在模板中添加一个空的HTML元素，比如一个div，将其放置在需要滚动到的位置，给它一个id属性，比如id="top"。

然后，在组件中的ngAfterViewInit()方法中，通过获取这个id为top的元素，并使用scrollIntoView()方法将页面滚动到该元素的位置。最后，将top变量设置为null，以释放内存。

以上就是解决Angular子路由中滚动位置恢复的方法。通过添加一个空的HTML元素，并在组件中手动调用scrollIntoView()方法，我们可以实现滚动位置的恢复，提升用户体验。

0
0 Comments

在Angular的子路由中，出现了一个问题：scrollPositionRestoration无法正常工作。这个问题的出现是由于在AppRoutingModule中添加了scrollPositionRestoration选项，并且在样式表中有一段代码影响了滚动到顶部的功能。

要解决这个问题，可以尝试移除样式表中的html和body的height属性，或者更改代码如下：

html {

min-height: 100%;

display: flex;

}

body {

min-height: 100%;

flex: 1;

}

但是要注意，更改样式表可能会影响其他功能的正常运作，所以需要谨慎操作。

0