angular-ui - AngularUI urlRouterProvider.when 带有可选参数的动态路由

Question

我正在尝试使用可选参数创建路由；显然 ui.route 没有这种能力(尽管 ngRoute 几乎永远都有)。因此，我将它们指定为查询参数，并尝试将它们转换为适当的 RESTful url，该 url 将为 $stateParams 展开:

在 ngRouter 语法中，我会指定:/:resource/:collection?/:type?/:index?
在 ui.router 中，我将其指定为:/:resource?collection&type&index
我尝试使用返回路径的函数动态翻译它(尝试使用 .when() 和 .rule()):

$urlRouterProvider
.when('' , '/index')
.when('/', '/index')
.when( urlMatcher.source , function convertToREST( $match , $stateParams )
{
    var params = [$match.resource];
    if ( angular.isDefined($match.collection) ) params[1] = $match.collection;
    if ( angular.isDefined($match.type) )       params[2] = $match.type;
    if ( angular.isDefined($match.index) )      params[3] = $match.index;
    var result = '/' + params.join('/');
    return result;
} )
.otherwise( '/404' );

以上导致没有 View 被渲染(删除第三个 .when() 并且 View 渲染得很好)。

并手动:

$urlRouterProvider
.when('' , '/index')
.when('/', '/index')
.when( '/:resource?collection' , '/:resource/:collection' )
.otherwise( '/404' );

这显然会导致循环迭代。我从 ui-router 的示例应用程序中得到了这个手动想法: state.js#L16 .我看到的唯一区别是我的以一个参数开头，但我不明白这有什么关系。

Answer 1

如果我正确理解了这个问题，那么您想要实现的是您的 url 的可选参数。

ui.router 确实提供了这个功能，有几个用于指定参数的选项。一个基本参数如下所示:

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: "42"});
        }
    })
Alternatively you can also use curly brackets:

// identical to previous example
url: "/contacts/{contactId}" 

如果您正在嵌套状态，则必须解析父路由中的参数，文档中提供了类似的情况:

 $stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId', 
   controller: function($stateParams){
      $stateParams.contactId //*** Watch Out! DOESN'T EXIST!! ***//
      $stateParams.itemId //*** Exists! ***//  
   }
})

解决方法是在父路由中使用resolve语句

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   },
   resolve:{
      contactId: ['$stateParams', function($stateParams){
          return $stateParams.contactId;
      }]
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId', 
   controller: function($stateParams, contactId){
      contactId //*** Exists! ***//
      $stateParams.itemId //*** Exists! ***//  
   }
})

如图所示，获取结果是通过在 Controller 中使用 $stateParams 像这样

$stateParams.contactId

您可以引用 documentation更多细节。