通过 Angular ui-router 中的 URL 路由导航到状态时传递状态参数答案

【问题标题】：Passing state params when navigating to a state by URL routing in angular ui-router通过 Angular ui-router 中的 URL 路由导航到状态时传递状态参数
【发布时间】：2015-03-26 22:12:24
【问题描述】：

下面是一个示例状态层次结构，

.state('home', {
  url: '/home',
  templateUrl: 'views/home.html',
  controller: 'HomeCtrl'
})
.state('home.books', {
  url: '/:collectionId',
  abstract: true,
  controller: 'BooksCtrl'
})
.state('home.books.displaybooks', {
  url: '^/books',
  templateUrl: 'views/displaybooks.html',
  controller: 'DisplayBookCtrl'
})

在 home.books.displaybooks 状态下，我显示书籍的集合。

我可以通过两种方式访问这个状态，

通过单击处于“主页”状态的链接。我使用 ui-sref 并为用户传递默认集合 ID。这里没有问题
通过URL路由http://localhost/books（请注意状态定义中url中的^。我想要绝对url而不在地址栏中显示collectionId）。这里的问题是状态没有获取到collectionId参数。那么，当我通过 URL 路由导航到状态时，请指出如何插入用户的默认 collectionId。

谢谢，

【问题讨论】：

如果有用，请参阅下面的答案以获得批准。

标签： angularjs angular-ui state angular-ui-router

【解决方案1】：

根据UI Router docs

在状态控制器中，$stateParams 对象将只包含在该州注册的参数。所以你不会看到在其他州注册的参数，包括祖先。

解决方法是在父路由中使用解析，然后将解析的值注入子状态/控制器：

$stateProvider
.state('home', {
  url: '/home',
  templateUrl: 'views/home.html',
  controller: 'HomeCtrl'
})
.state('home.books', {
  url: '/:collectionId',
  abstract: true,
  controller: 'BooksCtrl',
  resolve:{
      collectionId: ['$stateParams', function($stateParams){
          return $stateParams.collectionId;
      }]
  }
})
.state('home.books.displaybooks', {
  url: '^/books',
  templateUrl: 'views/displaybooks.html',
  // controller: 'DisplayBookCtrl' // this just needs collectionId now
  controller: function($stateParams, collectionId){
       console.log(collectionId);
  }
});

【讨论】：