当前位置: 首页 > 面试题库 >

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

黄啸
2023-03-14
问题内容

我有一个父状态,其中有两个孩子状态,我将基于展示一个状态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,我已经显示了两个标签 AccountSurvey

  1. 单击测量选项卡,然后在textarea显示的数据中添加一些数据。
  2. 单击“ 转到帐户” ,这将通过在锚点上进行操作将这些textarea值传递到另一个“ 帐户” 选项卡ui-sref="tabs.account({param1: thing1, param2: thing2})"

  3. 现在,您将看到html上的param1param2值,该值已从分配给作用域$stateParams

  4. 现在再次单击“ 调查” 选项卡,您将进入调查页面。

  5. 只需单击浏览器,您会发现param价值没有得到null

问题朋克

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

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

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

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

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

Github 问题链接在这里


问题答案:

我将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必须 手动进行。

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

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

更新的插头



 类似资料:
  • 问题内容: 我有一些登录信息,比如说用户名,登录电子邮件ID和位置。 即使在用户注销并关闭窗口后,我也希望将此信息保留在浏览器中。 这样,当用户在注销或会话期满后返回时,Web应用程序将填写客户端用户名,并要求用户输入密码。 我要求的最好的例子是Google登录。! 目前,我只使用会话,不使用cookie。 有什么可能的解决方案? 问题答案: LocalStorage被认为是在浏览器中永久存储值的

  • 问题内容: 如何在不使用查询字符串且仅使用一个路由名称的情况下允许对路由使用可选参数?我目前正在指定每条路线“五次”以允许零件的任意组合: 所有部件都必须是可选的。 路线必须解决任何变化。 必须有一个更容易/更清洁/更丑陋的方式。 问题答案: 简短答案…。

  • 本文向大家介绍input如何在各个浏览器下保持UI统一?相关面试题,主要包含被问及input如何在各个浏览器下保持UI统一?时的应答技巧和注意事项,需要的朋友参考一下 .ibutton { padding: 3px 15px; *padding: 0 15px; *height: 24px; font-size: 12px; text-align: center; text-shadow: #CF

  • 我想写一个脚本,它将2 GB的数据从硬盘加载到内存中,然后当其他程序请求时,它必须得到一个输入,并根据输入对这个数据进行一些计算。对我来说,重要的是将这2 GB的数据持久地保存在内存中,以加快计算速度,更重要的是避免巨大的I/O负载。 我应该如何将数据永远保存在内存中?或者更一般地说,我应该如何在Python中解决这样的问题?

  • 问题内容: 我正在使用ui-router来表示AngularJS应用程序中的状态。在其中,我想更改状态而不更改URL(基本上是“详细视图”已更新,但这不会影响URL)。 我使用的显示细节,但如果我指定像一个URL这仅适用于我。 在我看来,当前状态仅通过URL定义。 问题答案: 感谢您的回答,它确实对正确的方向有所帮助,但是我想添加更完整的描述。 在我的特定问题中,有一个复杂的因素,因为我需要向其注

  • 是否可以在参数化测试的执行过程中保留对变量所做的更改? 我有一个简单的日历,存储添加到它的事件: 为了测试它在后续调用中是否有效,我需要在测试中多次调用它: 这很好。但是,我不能用参数化测试来代替它: 问题是,在每次测试执行后都会重新初始化,因此之前添加的事件会丢失。当然,在测试方法中移动初始化也没有帮助。 这有可能吗?