UI路由器stateParams克隆对象？答案

【问题标题】：UI-router stateParams cloning objects?UI路由器stateParams克隆对象？
【发布时间】：2017-08-07 03:17:16
【问题描述】：

我有这条路线：

{
  name : 'myPage',
  url  : '/myPage',
  views: {
    '@': {
      component: components.MyComponent.name
    }
  },
  params: {
    turtle: {y: 2}
  },
  resolve  : {
    turtle: function($stateParams) {
      window.turtle = $stateParams.turtle;
      window.daaa = $stateParams;
      return $stateParams.turtle;
    }
  }
}

我有这个组件绑定def：

bindings: {
  turtle: '<'
}

以及MyComponent的控制器的构造函数：

class MyComponentController {
  let self = this;
  this.$onInit = function() {
    console.log("-----")
    console.log("window.turtle: " + JSON.stringify(window.turtle))
    console.log("self.turtle: " + JSON.stringify(self.turtle))
    console.log("window.turtle == self.turtle: " + (window.turtle == self.turtle))
    console.log("window.turtle == self.$stateParams.turtle: " + (window.turtle == self.$stateParams.turtle))
    console.log("window.daaa == self.$stateParams: " + (window.daaa == self.$stateParams))
    console.log("-----")
  }
}

打印出来：

-----
window.turtle: {y:2}
self.turtle: {y:2}
window.turtle == self.turtle: true
window.turtle == self.$stateParams.turtle: false
window.daaa == self.$stateParams: false
-----

这对我来说真的很奇怪......，让我觉得一旦你进入一个状态，UI-router 会克隆 $stateParams （所以你在解析中看到的 $stateParams ！= 你看到的 $stateParams在控制器中）...并且它还对每个声明的参数进行克隆（深度克隆？？？）。

我没想到会这样。它是一个错误吗？或功能（也许是保护机制？）。谁是这里的罪魁祸首？ UI路由器？或者它是 Angular 1.5 组件（带有隔离范围的东西）？

提前感谢您帮助我澄清这一点。

【问题讨论】：

至少对于 window.daaa，UI-Router 每次注入时都会创建一个新的 $stateParams（它是一个本地对象，而不是实际的单例服务）。虽然不知道window.turtle
我不介意每次注入时都会创建 $stateParams。但是克隆所有参数？工作太多了，不是吗？我的代码是基于您获得相同实例的假设编写的（在解析期间，在控制器内部......，随后也在子状态中）......直到我遇到麻烦（数组操作），并做了检查上面，并且非常惊讶......并且怀疑这是否是一个功能。未在 UI 路由器页面中记录（或措辞模糊）
顺便说一句，您可能想在问题中输入您使用的 UI-Router 版本
angular-ui-router@1.0.0-beta.3 。让我升级到 rc1 看看会发生什么。
哇...确认....这是 beta 3 中的一个错误。现在有了 rc1，我得到了我所期望的。

标签： angularjs angular-ui-router state

【解决方案1】：

根据ui-router source code（由 Daniel here 链接）$stateParams 已被弃用，建议改用 $transition$ 可注射（请参阅$transition$ 上的ui-router 文档）

这是在解析函数中使用它的示例：

$stateProvider.state('a-route', {
  // ...

  // define params for route
  params: {
    data: null
  },
  // set up data to resolve to params.data
  resolve: {
    data: ($transition$) => {
      return $transition$.params().data;
    }
  }
})

请在此处查看工作示例： http://jsbin.com/velekot/edit?js,output

注意：文档还声称可以将 $transition$ 注入控制器，但我无法使其工作，因此使用了 resolve fn。

【讨论】：