如何在 Angular 中导航期间保留分页数据？

Question

我有一个包含列表和详细信息页面的应用程序。在列表页面中，表格具有分页功能，并且还有一个用于过滤列表项的搜索框。单击列表中的项目时，它会打开相关记录的详细信息。我想知道当我导航到详细信息页面时保留列表页面的分页和过滤参数的正确方法是什么，然后在返回此列表页面时使用这些参数。我的意思是，用户在列表的第三页，然后单击记录的详细信息图标。然后打开详细信息页面，然后单击该页面上的返回按钮。我希望用户可以通过获取他之前发送的参数值再次导航到第三页。如果我能得到这些值，那么剩下的当然没问题。

我应该为此使用NavigationExtras 或其他吗？

Answer 1

有多种方法可以实现此类功能。一般情况下，需要在列表组件 OnDestroy 期间将最后一次搜索状态（搜索值、页面、搜索结果等）保存在某处，然后在列表组件的 OnInit 钩子中使用。下面是一个使用服务的例子：

列表组件

constructor(private preserveSearch: PreserveSearchService){}

ngOnInit() {
    this.recoverLastSearchValue();
}

ngOnDestroy() {
    this.preserveSearch.searchState = {
        searchValue: this.searchControl.value,
        results: this.data,
        resultsLength: this.resultsLength,
    };
}

recoverLastSearchValue() {
    const lastSearch = this.preserveSearch.searchState;
    if (lastSearch) {
        this.searchControl.setValue(lastSearch.searchValue, {
            emitEvent: false,
            emitModelToViewChange: false,
        });
        this.data = lastSearch.results;
        this.resultsLength = lastSearch.resultsLength;
    }
}

搜索状态服务

import { Injectable } from "@angular/core";
import { SearchResultsItem } from "app/_models/search";

interface PreservedSearchState {
    searchValue: string;
    results: SearchResultsItem[];
    resultsLength: number;
}

@Injectable({
    providedIn: "root",
})
export class PreserveSearchService {
    private lastSearch: PreservedSearchState;

    get searchState(): PreservedSearchState {
        return this.lastSearch;
    }

    set searchState(lastSearch: PreservedSearchState) {
        this.lastSearch = lastSearch;
    }

    constructor() {}
}