如何坚持下去的浏览器可选状态参数早在UI的路由器？ [英] 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.

出这两个状态一个不必参数，如参数1 和参数2 ，我已经使用 PARAMS 状态定义UI内部路由器的选择。

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
    }
});

如果你看一下我的路线params选项是不是真的在 URL里面介绍，这就是为什么我在考虑再为可选。

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. 单击调查选项卡，然后在的textarea 显示哪些添加一些数据。



2. 点击上的转到帐户，将这些信息传递的textarea 值
   其他的帐户标签做 UI-SREF =tabs.account（{参数1：thing1，参数2：thing2}）在锚

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

现在，您将看到参数1 ＆安培; 参数2 已分配到范围从 $ 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参数。像网​​址：'/帐号/：参数1 /：参数2'，（但我不会preFER本）

• 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)

我已经尝试过角UI的路由器 粘状态 但是这似乎并不为我工作。更好的方法是什么呢？

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

有没有办法通过，我可以让我的使用情况下的工作，任何想法，将AP preciate。

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

的问题的链接在这里

推荐答案

我会移动 PARAMS 定义父状态，从而共享之间可选的​​状态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 按通常在孩子的控制器，你将有完全访问正在传递的PARAMS。如果你不希望使用在特定的子状态的参数，可以简单地避免注射他们。

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的（不PARAMS（将保持原样））的


• UI-SREF的（使用参数（将覆盖））的

• Back button
• Forward button
• ui-sref (without params (will keep as-is))
• ui-sref (with params (will overwrite))

$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 }
    }
  })

如果您在任何时候想清除的PARAMS而父的州树内行驶，你就必须这样做的手动的

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.

的我实现手动清除可能不是你present的情况下可取的，但你有没有采取反对它的积极的立场，因此我觉得建议有可取之处。的

更新plunker

updated plunker

这篇关于如何坚持下去的浏览器可选状态参数早在UI的路由器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！