Question

以下是状态层次结构示例

.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中，我展示了一系列书籍。

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

点击＆＃34; home＆＃34;中的链接州。我使用ui-sref并为用户传递默认的集合ID。这里没问题
通过网址路由http://localhost/books（请注意状态定义中的url中的^。我想要绝对网址而不在地址栏中显示collectionId）。这里的问题是状态没有得到collectionId参数。因此，当我通过URL路由导航到该状态时，请指出如何插入用户的默认collectionId。

谢谢，

Answer 1

根据UI Router docs

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

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

$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);
  }
});

在角度ui-router中通过URL路由导航到状态时传递状态参数

1 个答案: