加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 任何人都可以解释使用ui-router和后退按钮的意外状

发布时间:2020-12-17 16:57:34 所属栏目:安全 来源:网络整理
导读:我正在使用具有嵌套状态/视图的ui-router,我遇到了后退按钮的问题. 国家层级 产品 个人 sub-cat-1 sub-cat-2 生意 sub-cat-a sub-cat-b 搜索 问题 我最初在状态product.business.sub-cat-a中加载页面.顶级页面有一个搜索输入表单,当使用时,会导致状态转换到
我正在使用具有嵌套状态/视图的ui-router,我遇到了后退按钮的问题.

国家层级

>产品

>个人

> sub-cat-1
> sub-cat-2

>生意

> sub-cat-a
> sub-cat-b

>搜索

问题

我最初在状态product.business.sub-cat-a中加载页面.顶级页面有一个搜索输入表单,当使用时,会导致状态转换到状态搜索(通过调用$state.go()),这一切都正常.

但是,如果我点击后退按钮,我会看到状态从搜索过渡到product.business.sub-cat-a按预期(通过调用$state.transitionTo()),但是还有一个额外的调用$state.go()返回状态搜索,我无法确定此调用的来源.

如果有人能够了解ui-router正在做什么,我将不胜感激

更新

我已经将问题追溯到urlRouter和$location之间的交互.似乎$urlRouter.update有时会将stat中定义的url推送到$location,有时会将值从$location中拉出来.

在这种情况下,当出现问题时,urlRouter位置值是旧的url,它覆盖$location.url值并导致urlRouter加载旧状态而不是我们尝试返回的状态.

顺序似乎是:

>单击后退按钮
>浏览器从其历史记录中加载上一个网址
> ui-router开始加载正确的状态(以前的状态)
>在urlRouter上调用update(没有读取参数),这会导致$location根据urlRouter位置值重置为前后按钮状态url
> urlRouter然后看到两个url /状态不同,所以它重新加载现在由$location.url指定的状态,这是前回按钮url

所以问题似乎是在上面的步骤3中更新状态时不更新urlRouter位置值.

任何ui-router / angular专家,请随时指出我正确的方向.

解决方法

对于任何面临类似问题的人来说,问题在于当按下后退按钮时,会触发两个状态转换.第一个是后退按钮产生的正确;第二个是与父(业务)状态相关联的$state.go(),如上面的层次结构所示.

在解决步骤生成的promise之前处理了第二个转换.这意味着在后续的$urlRoute.udpate()调用之前urlRouter位置尚未更新,因此路由器重新加载了原始页面.

希望这可能有助于节省其他人一天的调试:-)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读