Question

我有一张报表和自定义过滤器的表格，分页在那里。然后我将路由更改为/：reportId。浏览回到表格后，将重置过滤器/分页。仅当我从报告路线返回时（如果从其他路线返回，请重置过滤器），如何在更改路线时保存该路线当我确切地来自报告路线时，该如何挂钩？

P.S。我在tableComponent的ngOnInit（）中订阅了服务http请求

Answer 1

我将使用某种状态管理（NgRx，NGXS），或者您可以将应用的过滤器页面存储在服务中。

Answer 2

您可以将过滤器和排序设置存储在服务的变量中

SortKeyPosition

然后在导航中使用该变量

let navigationExtras: NavigationExtras = {
    queryParams: { 
        'page': currentPage,
        'sortBy': 'date',
        'filter': true
    }
};

并使用它们来设置表格

// Navigate to the table component with extras
this.router.navigate(['/table'], navigationExtras);

优点是，相同的URL将为您提供相同的表过滤器/排序状态，这在某些情况下可能会很有用，缺点是在添加参数时必须处理长URL。

如果您正在寻找更精致的解决方案，请一定要查看NgRx（如@hohnzy所述）

Answer 3

您必须适合将信息存储在localStorage中的任何页面，例如：

filterData: {page1: {Paging: '', sort: [], filetype: ''}, page2: {Paging: '', sort: [], filetype: ''}}

Answer 4

将父容器组件用于表和表项。

{
    path: 'table',
    component: ContainerComponent,
    children: [
      {
        path: '',
        component: TableComponent,
      },
      {
        path: ':id',
        component: TableItemComponent,
      }
    ]
  },

将过滤器保存在TableComponent的ngOnDestroy（）中。在ContainerComponent的ngOnDestroy（）中重置过滤器。将数据保留在其他服务中。

更改路线后如何保存表格过滤器/页面？

4 个答案: