如何使用Angular Material表滚动到特定页面中的特定行

Question

我正在使用有角材质在页面上以分页显示数据，当用户单击行时，我将他重定向到另一页，如果他想返回到表格页，则单击按钮。

我的问题是用户需要返回表格页面并滚动到特定行，我这样做

document.getElementById(elementId).scrollIntoView()

但是如果单击的行不在第一页中，则找不到该元素，我如何分页到该行所在的页面？

第二个问题是用户可以过滤表然后选择特定的行，如果我保存页码，当他返回表页时，数据将在没有过滤器的情况下呈现，并且页码将不正确

Answer 1

您需要将分页器与Angular的路由器连接。例如，假设您按如下所示构造了路径路径：http://my/url/to/table/component?page=2在这种情况下，您可以从URL到表中获取页面索引2，如下所示：组件类别：class MyComponent {&nbsp; pageIndex = this.activatedRoute.queryParams.pipe(&nbsp; &nbsp; map(params => params['page'])&nbsp; );&nbsp; constructor(activatedRoute: ActivatedRoute) {}}模板：<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>到目前为止，URL将驱动该表。现在，当用户使用分页器浏览表格时，您还需要更新URL：模板：<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>组件类别：class MyComponent {&nbsp; pageIndex = this.activatedRoute.queryParams.pipe(&nbsp; &nbsp; map(params => params['page'])&nbsp; )&nbsp; constructor(activatedRoute: ActivatedRoute, router: Router) {}&nbsp; pageChange(e: PageEvent): void {&nbsp; &nbsp; this.router.navigate( /* ... */ );&nbsp; }}现在，随着用户在表中浏览时URL正在更新，这使路由器可以在用户返回到以前访问的URL时驱动表。