应用程序路由中的scrollPositionRestoration：'enabled'是否适用于包含在Angular中延迟加载的可滚动分页数据的页面？

问题描述

我在左侧的一列中有一个带有分页数据的页面，在右侧有一个地图（例如Airbnb） 当我单击列底部的下一页时，我获取了返回项目列表（例如成员）的页面数据，但是我的可滚动列（即引导列）却没有滚动到顶部，它停留在底部，仅更新数据项的新列表。

仅供参考-我在这样的应用程序路由文件中使用了scrollpositionrestoration，但它不会滚动页面中列内的可滚动分页列表。

RouterModule.forRoot(routes,{scrollPositionRestoration: 'enabled'})

分页列表未滚动到顶部的页面包含在它自己的模块（例如，members.module.ts）中，它具有自己的路由文件（例如，members-routing.module.tx），并且正在像这样的懒加载。

在app-routing.ts

{
  path: 'members',canActivate: [AuthGuard],loadChildren: () => import('./members/members.module')
    .then(mod => mod.MembersModule)
},

在member-routing.module.ts文件中，我有这个

const routes: Routes = [{
    path: '',component: MembersComponent
  },{
    path: ':id',component: MemberDetailsComponent,resolve: {
      user: MemberDetailResolver
    },data: {
      breadcrumb: {
        alias: 'memberDetails'
      }
    }
  },];

@NgModule({
  declarations: [],imports: [
    CommonModule,RouterModule.forChild(routes)
  ],exports: [RouterModule]
})
export class MembersRoutingModule {}

问题-我是否需要使用'scrollPositionRestoration'进行其他某种类型的导入或导出操作才能使此功能正常工作？或者对滚动列数据无效？

我当前的解决方案是在.ts文件中获取elementRef，然后在获取数据后滚动到顶部。但这似乎不是一个很好的Angular 9+解决方案？

例如。

// above in the .ts file get col that contains the paginated data
@ViewChild('scrollableContentCol',{
  static: true
}) scrollableContentCol: ElementRef;

// gets the member data
this.membeRSService.getMembers()
  .subscribe(response => {
    this.totalCount = response.count;
    this.scrollableContentCol.nativeElement.scrollTo(0,0); // scroll the col with paginated data back to top
    this.members = response.data as IUser[];
    // do other stuff
  });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）