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

一尘不染

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

angularjs

我有一个父状态，其中有两个孩子状态，我将基于展示一个状态URL。

在这两个之中，必须有states诸如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
    }
});

如果您查看我的路线，params选项并没有真正引入URL，这就是为什么我考虑将其作为可选选项。

问题

看看plunkr，我已经显示了两个标签 Account ＆ Survey ，

单击测量选项卡，然后在textarea显示的数据中添加一些数据。
单击“ 转到帐户” ，这将通过在锚点上进行操作将这些textarea值传递到另一个“ 帐户” 选项卡ui-sref="tabs.account({param1: thing1, param2: thing2})"
现在，您将看到html上的param1＆param2值，该值已从分配给作用域$stateParams
现在再次单击“ 调查” 选项卡，您将进入调查页面。
只需单击浏览器，您会发现param价值没有得到null。

问题朋克

我相信您已收到我想问的问题，为什么未存储可选参数值？因为它们已经成为国家的一部分。

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

通过创建一项将在两个视图之间共享数据的服务。
通过在状态URL内添加参数。喜欢url: '/account/:param1/:param2',（但我不喜欢这个）

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

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

Github 问题链接在这里

阅读 232

2020-07-04

共1个答案

一尘不染

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

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

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

这与;

返回键
前进按钮
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必须 手动进行。

通过使用此解决方案，这将是我唯一能看到的警告。

我知道在您提出的情况下手动清除可能并不理想，但您并未对此采取积极的立场，因此，我认为此建议值得。

更新的插头

2020-07-04