角子路由的scrollPositionRestoration加法
角子路由的scrollPositionRestoration加法
提问于 2020-05-13 06:30:05
在我的角形6应用程序中，当我向下滚动一个页面并单击页面底部的链接时，它确实改变了路线，并带我进入下一页，但它没有滚动到页面的顶部。因此，如果第一页(父母)很长，第二页(子)内容很少，就会给人一种印象，认为第二页缺乏内容。因为只有当用户滚动到页面顶部时，内容才是可见的。
我试着给孩子加"scrollPositionRestoration“，
@NgModule({
imports: [RouterModule.forChild(routes, {
scrollPositionRestoration: 'top'
})],
exports: [RouterModule]
})这给了我错误，因为：
(property) scrollPositionRestoration: string
Expected 1 arguments, but got 2.如何解决这个问题？有任何想法滚动页面顶部的角子组件吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-05-26 08:41:27
如果所有操作失败，则在顶部(或期望滚动到位置)创建一些空的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;
}
}Stack Overflow用户
发布于 2021-03-04 18:21:57
我假设您已经将scrollPositionRestoration选项添加到AppRoutingModule中，如下所示：
...
@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;
}注意！要小心地更改样式表，因为它会破坏其他东西.
Stack Overflow用户
发布于 2021-09-22 10:45:46
使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61767796
复制相关文章
相似问题
腾讯云开发者
