1

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

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

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
  });

4

0 回答 0