UI-Router $stateParams 不返回值答案

【问题标题】：UI-Router $stateParams Not Returning ValuesUI-Router $stateParams 不返回值
【发布时间】：2018-04-07 13:13:07
【问题描述】：

Angular 1.6.9，UI-Router 1.0.15

目标是使用解析器返回绑定到 Angular 组件的值。我有两个可用的第三方示例，一个是 UI Router 站点上的教程 Hello Galaxy 示例，另一个是 Codepen 中的简单案例。

https://plnkr.co/edit/XdKQmifZ69pcYeBnQ945?p=preview

请参阅 CodePen 上 David (@StretchKids) 的 Pen Angular JS UI-Router State Params。

但是，无论我如何剪切和粘贴，我都无法在我的 Codepen 项目中获取解析器函数来查看传递的对象。对象配置在组件下的 fred.js 和 ethel.js 中。传递对象的按钮位于 index.pug 文件中（Codepen 也使 index.html 可用）。

程序进入状态并执行解析器功能。但是 $stateParameters 和 $transition$.params() 都是空的。啊！

sn-p 不执行。

   .module("MyApp")
   .component("fred", {
      templateUrl: "components/fred.html",
      bindings: { name: "@" },
      controller: function($stateParams){
         var vm = this;
         vm.activeId = $stateParams.id;
	      vm.resolveId = this.name;
      }
   })
   .config(function($stateProvider) {
      $stateProvider.state({
         name: "fred",
         url: "/fred",
         component: "fred",
         resolve: {
            name: function($transition$, $stateParams) {
               ;
               return $stateParams.id;
            }
         }

md-button(ng-repeat="name in ac.lvl1" ui-sref-active="active" ui-sref="{{name}}({id: 'bar'})") {{name}}

这是 CodePen 项目的链接：https://codepen.io/StretchKids/project/editor/AJPvQm#

求助！！！

谢谢，

大卫

【问题讨论】：

这是 Codepen 中的 UI-Router Hello Galaxy 项目。它有效......我的没有。啊! codepen.io/StretchKids/project/editor/AxbrBw

标签： angularjs angular-ui-router

【解决方案1】：

经过一番搜索和测试，我找到了答案。首先，我打破了 UI-Router Hello Galaxy 示例。搜索说传递的参数必须包含在 URL 中。

这解释了为什么 Hello Galaxy 示例会传递人员的 id，然后搜索人员对象的人员数组，而不是仅传递已经拥有的人员对象。绝对是谷仓周围的漫长路！

需要在状态定义中添加一个 params 对象来提前声明 $stateParams 变量。

{
         name: "person",
         url: "/{person.id}",
         component: "person",
         params:{data:null},
         resolve: {
            person: function($stateParams,$transition$) {
               return $stateParams.data.person;
            }
         }
      }

https://ui-router.github.io/guide/states#state-properties

https://ui-router.github.io/ng1/docs/1.0.14/interfaces/state.statedeclaration.html#params

http://benfoster.io/blog/ui-router-optional-parameters

这可能是小组中最好的：https://ui-router.github.io/guide/ng1/route-to-component

【讨论】：