微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决应用程序路由中的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 举报,一经查实,本站将立刻删除。