微風$ location設計模式

Question

我在我的角度站點中有一個頁面，該頁面允許用戶基於多個條件（例如：employeeId，eventId，fromDate，toDate等）運行報告。 用戶選擇了要報告的參數后，單擊“提交”按鈕，並在同一頁面上顯示與所選條件匹配的搜索結果列表。 然后，他們可以單擊搜索結果之一，以轉到該項目的詳細信息頁面。

我的問題是，當用戶單擊“后退”按鈕時，它們將返回到“ /報告” URL-並且不會保留其搜索參數或結果。 我希望他們以他們單擊詳細信息行時的狀態返回到頁面（即'/ reports？employeeId = 2＆eventId = 7'），並且正在為此用例尋找“最佳做法”模式。

Answer 1

我假設您正在使用路由庫，或者是Angular為您提供的ngRoute ，或者是像ui-router這樣的第三方庫。

如果您使用的是ngRoute模塊，則應該能夠在其中定義一個名為$ routeParams的服務，該服務將當前路由的參數作為對象公開。 如果使用ui-router ，則可以使用$ stateParams 。

當您在頁面之間導航並單擊后退按鈕時，路由參數的實際持久性由$ location服務使用history.pushState瀏覽器API處理。

為了更好地了解路由在Angular中的工作方式，請在Angular網站上查看本教程 。

Answer 2

您可以使用HTML5 Web Storage API存儲此信息。 在http://diveintohtml5.info/storage.html中查找一些示例。

因此，您可以在本地存儲中存儲字典（如collection），該字典將每個View（或頁面）映射到它處理的值。

例如，您可以存儲如下對象：

data = {
    reportPage: {
        employeeId: 2,
        eventId: 7,
        ...
    }
}

然后，當您單擊后退按鈕時，例如，可以在激活方法中預加載此數據。