如何在 ui-router 中保留浏览器上的可选状态参数? [英] How to persist optional state parameter on browser back in ui-router?

问题描述

我有一个父状态，里面有两个子状态，我将根据 URL 显示一个状态.

I'm having one parent state that has two children's state inside that I'm going to show one state based on the URL.

在这两个 states 中，一个是必须使用 param1 和 param2 之类的参数，我使用了 params状态定义中的 ui-router 选项.

Out of those two states one is having to parameters like param1 and param2, I have use params option of ui-router inside state definition.

状态

$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 选项，这就是我将其视为可选的原因.

If you look at my route the params option is not really introduced inside the URL, that's why I'm considering then as optional.

看看 plunkr，我已经展示了两个标签帐户 &调查、

Look at plunkr, I've shown two tabs Account & Survey,

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

2. 点击转到帐户，将这些textarea值传递给通过在锚点上执行 ui-sref="tabs.account({param1: thing1, param2: thing2})" 来创建另一个 Account 标签

1. Click on Survey tab, then add some data in the textarea which are shown.

2. Click on Go to Account that will pass those textarea values to the other Account tab by doing ui-sref="tabs.account({param1: thing1, param2: thing2})" on the anchor

现在您将看到 param1 &html 上的 param2 值已从 $stateParams

Now you will see the param1 & param2 values on html which has been assigned to scope from $stateParams

问题Plunkr

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

I believe you got what I wanted to ask, why the optional parameter value has not been store? as they have been a part of state.

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

I know I can solve this issue by below two solutions.

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

• By creating one service that will share data between two views.
• By adding parameter inside the state URL. like url: '/account/:param1/:param2', (But i wouldn't prefer this)

我已经尝试过 angular-ui-routers 粘性状态 但这似乎对我不起作用.什么是更好的方法?

I already tried angular-ui-routers sticky states but that doesn't seems to work for me. What is the better way to this?

有什么方法可以让我的用例工作，任何想法都会很感激.

Is there any way by which I can make my use case working, Any ideas would appreciate.

Github 在此处发布链接

Github Issue Link Here

推荐答案

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

I would move the params definition to the parent state, so as to share the optional state params between your two child states.

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

The child states will inherit the $stateParams from your parent, as such there is no real 'workaround' needed.

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

Simply inject $stateParams as per usual in your child controllers and you will have full access to the params being passed around. If you don't want to utilise the params in a specific child state, simply avoid injecting them.

这适用于；

• 返回按钮
• 前进按钮
• 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 }
    }
  })

如果您想在父的状态树中旅行时在任何时候清除参数，则必须手动执行.

If you at any point want to clear the params while travelling within the state tree of parent, you would have to do so manually.

这将是我使用此解决方案后看到的唯一真正的警告.

That would be the only real caveat I can see by using this solution.

我意识到在您提出的情况下可能不希望手动清除，但您没有采取积极的立场来反对它，因此我认为该建议是有价值的.

更新的plunker

这篇关于如何在 ui-router 中保留浏览器上的可选状态参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！