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

Question

我正在使用有角材质在页面上以分页显示数据，当用户单击行时，我将他重定向到另一页，如果他想返回到表格页，则单击按钮。我的问题是用户需要返回表格页面并滚动到特定行，我这样做document.getElementById(elementId).scrollIntoView()但是如果单击的行不在第一页中，则找不到该元素，我如何分页到该行所在的页面？第二个问题是用户可以过滤表然后选择特定的行，如果我保存页码，当他返回表页时，数据将在没有过滤器的情况下呈现，并且页码将不正确

Answer 1

您需要将分页器与Angular的路由器连接。

例如，假设您按如下所示构造了路径路径：

http://my/url/to/table/component?page=2

在这种情况下，您可以从URL到表中获取页面索引2，如下所示：

组件类别：

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(

    map(params => params['page'])

  );

  constructor(activatedRoute: ActivatedRoute) {}

}

模板：

<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>

到目前为止，URL将驱动该表。现在，当用户使用分页器浏览表格时，您还需要更新URL：

模板：

<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>

组件类别：

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(

    map(params => params['page'])

  )

  constructor(activatedRoute: ActivatedRoute, router: Router) {}

  pageChange(e: PageEvent): void {

    this.router.navigate( /* ... */ );

  }

}

现在，随着用户在表中浏览时URL正在更新，这使路由器可以在用户返回到以前访问的URL时驱动表。