UI-路由器 $stateParams 未返回值

Question

Angular 1.6.9，UI-路由器 1.0.15

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

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

见笔Angular JS UI-Router State Params by David (@StretchKids) on CodePen.

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

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

代码段没有执行。

   .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 项目的 link：https://codepen.io/StretchKids/project/editor/AJPvQm#

求助！！！

谢谢，

大卫

Answer 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

UI-路由器 $stateParams 未返回值

UI-Router $stateParams Not Returning Values

angularjs

angular-ui-router