在返回时保留先前状态的数据 - Angular 1.4 UI Router答案

【问题标题】：Persist data from the previous state while going back - Angular 1.4 UI Router在返回时保留先前状态的数据 - Angular 1.4 UI Router
【发布时间】：2018-05-25 16:07:26
【问题描述】：

我有一个 Web 应用程序，其中有许多基于 URL 更改的状态。有一个User Management 页面（包含一个搜索Input 控件），它根据搜索结果列出用户。

单击特定的User 时，用户详细信息将通过不同的状态加载。我输入了Button 以返回User Management 页面。

要求是从User Detail页面返回时，将搜索结果保留在User Management页面中。

请帮我实现这个要求，不要让新的 XHR 再次获取搜索列表。

.state('userManagement', {
    url: '/user-management',
    templateUrl: 'components/userManagement/UserMgmt.view.html',
    controller: 'UserMgmtCtrl',
    controllerAs: 'vm'
  })
  .state('userDetail', {
    url: '/user-detail/:userId',
    templateUrl: 'components/userManagement/UserDetail.view.html',
    controller: 'UserDetailCtrl',
    controllerAs: 'vm'
  })

我应该有嵌套状态或其他东西来实现这一点吗？

【问题讨论】：

您应该使用工厂/服务来跨状态/视图持久化数据。
当你使用按钮返回时，你是在做$state.go()吗？如果是这样，您可以简单地将搜索参数传回您的 userManagement 状态。
@Lex 我是路由新手，所以这是一个愚蠢的问题。这不需要另一个 XHR 吗？
@Ohjay44 我可以使用服务，这是一个显而易见的答案，但state routing 中是否有任何功能可以直接实现这一点？这就是确切的问题。
你是对的，它会的。正如 Ohjay44 所提到的，如果您要存储要使用服务的结果。

标签： angularjs angular-ui-router url-routing

【解决方案1】：

您可以在状态中添加解析，以在控制器中注入您想要的东西。

使用 Angular 服务来存储你的东西，因为它们是单例的，这意味着它们只被实例化一次，因此存储在它们中的数据总是相同的。

.state('userManagement', {
    url: '/user-management',
    templateUrl: 'components/userManagement/UserMgmt.view.html',
    controller: 'UserMgmtCtrl',
    controllerAs: 'vm',
    resolve: {
        yourStuff: function (StorageService) {
            return StorageService.getStuff();
        } 
    }
})
.state('userDetail', {
    url: '/user-detail/:userId',
    templateUrl: 'components/userManagement/UserDetail.view.html',
    controller: 'UserDetailCtrl',
    controllerAs: 'vm',
    resolve: {
        yourStuff: function (StorageService) {
            return StorageService.getStuff();
        } 
    }
})

app.factory("StorageService", function () {
    var yourStuffStorage = {
        "initial": "stuff"
    };

    return {
          getStuff: getStuff,
          setStuff: setStuff
    };

    function getStuff () {
        return yourStuffStorage;
    }

    function setStuff (newStuff) {
        yourStuffStorage = angular.copy(newStuff); 
    }
})

app.controller("UserMgmtCtrl", function (yourStuff) {
    console.log("do stuff with your stuff 1", yourStuff);
});

app.controller("UserDetailCtrl", function (yourStuff) {
    console.log("do stuff with your stuff 2", yourStuff);
});

如果您想知道我们为什么不注入服务并查询数据，那是因为在 ui-router 中获取数据（有时通过承诺）并将结果传递给控制器被认为是最佳实践，因此在数据加载之前不会加载状态。

希望这会有所帮助:)

【讨论】：