如何在 Angular 8 中保存表格的分页、排序、搜索状态？我正在使用 angular2-datatable

Question

我有一个显示项目列表的表格。我单击了第 3 页中的一个项目并导航到该项目的详细信息页面。现在，当我导航回表格页面时，在详细信息页面中完成任务后，我想进入同一页面 3。 当前行为：它导航到第 1 页。 阅读数据表的文档，我发现了一个保存状态的属性 stateSave。我如何在 angular2-datatable 中实现它？ 我正在使用 angular2-datatable 来显示表格中的项目。

Answer 1

我认为有很多方法可以解决这个问题。

• 如果您有状态管理系统，您可以将当前页面保存在状态中
• 您可以在路由器中包含页码。

我更喜欢路由器方式，因为每当刷新 URL 或复制粘贴到另一个浏览器时，它都会呈现准确的页面。

const route: Route = [
  {
    path: 'table/:pageNumber',
    component: TableComponent,
  },
  {
    path: 'table/:pageNumber/item',
    component: ItemComponent,
  }
];

使用this.router.navigate(['table', 1]); 初始加载表

在 TableComponent 中使用下面的代码来获取ngOnInit 上的页码

class TableComponent implements ngOnInit() {
  activePage!: number;

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

  ngOnInit() {
    this.activePage = this.activatedRoute.snapshot.params.pageNumber || 1;
  }
  
  onRowClick() {
   this.router.navigate(['table', this.activePage, 'item'])
  }
}

<table ...
[mfActivePage]="activePage" (mfOnPageChange)="onPageChange($event)>
</table>

这就是整个想法，路由器配置和路由 url 可能会根据您的应用程序而有所不同。请试试这个。