javascript - 如何在 ui-router 中将可选状态参数保存在浏览器上？

Question

我有一个父状态，其中有两个子状态，我将根据 URL 显示一个状态。

在这两种状态中，一种是必须使用param1和param2这样的参数，我使用了params状态定义中的 ui-router 选项。

状态

$stateProvider.state('tabs.account', {
    url: '/account',
    views: {
        'content@tabs': {
            templateUrl: 'account.html',
            controller: function($scope, $stateParams) {
                //This params are internally used to make ajax and show some data.
                $scope.param1 = $stateParams.param1;
                $scope.param2 = $stateParams.param2;
            },
        }
    },
    params: {
        param1: { value: null }, //this are optional param
        param2: { value: null } //because they are not used in url
    }
});

如果您查看我的路由，URL 中并未真正引入 params 选项，这就是我将 then 视为可选的原因。

问题

看看 plunkr，我显示了两个标签 Account 和 Survey，

1. 点击 Survey 选项卡，然后在显示的 textarea 中添加一些数据。

2. 点击 Go to Account 将那些 textarea 值传递给通过在 anchor 上执行 ui-sref="tabs.account({param1: thing1, param2: thing2})"

Account 标签>

3. 现在您将在 html 上看到 param1 和 param2 值已分配给 $stateParams

4. 现在再次点击调查标签，您将进入调查页面。
5. 只需单击浏览器返回，您会注意到 param 值未变为 null。

Problem Plunkr

相信你已经明白我想问的了，为什么可选参数值没有被存储？因为他们是国家的一部分。

我知道我可以通过以下两种解决方案解决这个问题。

• 通过创建一项服务来在两个 View 之间共享数据。
• 通过在状态 URL 中添加参数。像 url: '/account/:param1/:param2', (但我不喜欢这个)

我已经尝试过 angular-ui-routers sticky states但这似乎对我不起作用。什么是更好的方法？

有什么方法可以使我的用例正常工作，任何想法都将不胜感激。

Github Issue Link Here

Answer 1

我会将 params 定义移动到父状态，以便在您的两个子状态之间共享可选的状态参数。

子状态将从您的父状态继承$stateParams，因此不需要真正的“解决方法”。

只需像往常一样在您的子 Controller 中注入(inject) $stateParams，您就可以完全访问传递的参数。如果您不想在特定子状态下使用参数，只需避免注入(inject)它们即可。

这适用于；

• 后退按钮
• 前进按钮
• ui-sref (没有参数(将保持原样))
• ui-sref (带参数(将覆盖))

---

$stateProvider
  .state('parent', {
    params: { p1: null, p2: null }
  })
  .state('parent.childOne', {
    url: '/one',
    controller: function ($stateParams) {
      console.log($stateParams); // { p1: null, p2: null }
    }
  })
  .state('parent.childTwo', {
    url: '/two',
    controller: function ($stateParams) {
      console.log($stateParams); // { p1: null, p2: null }
    }
  })

如果您在parent 的状态树中移动时在任何时候想要清除参数，则必须手动执行。

这将是我在使用此解决方案时唯一真正需要注意的地方。

我意识到在您提出的情况下手动清除可能不可取，但您没有采取积极的立场反对它，因此我觉得这个建议是有值(value)的。

updated plunker