Question

我尝试像这样设置我的路由

...
url: '/view/:inboxId?'
...

但Angular会抛出此错误：

Error: Invalid parameter name '' in pattern '/view/:inboxId?'

所以基本上我必须设置两种不同的状态：

state('view', {
            url: '/view/:inboxId',
            templateUrl: 'templates/view.html',
            controller: 'viewCtrl'
        }).

        state('view_root', {
            url: '/view',
            templateUrl: 'templates/view.html',
            controller: 'viewCtrl'
        })

有没有办法将这些状态合并为一个？

Answer 1

要有一个可选的参数 - 像你一样声明它 - 但不要传递它。这是一个example。根据您的喜好，所有这些都可以与一个州（无根）或两个（根和细节）一起使用。

问题中提到的定义已准备好处理这些状态调用：

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

我们不必使用 ? 将参数标记为可选。只是两个网址都必须是唯一的（例如/view/:id与/view - 其中第二个网址没有尾随/）

Answer 2

.state('home', {
    url: '/home/:id/:token',
    templateUrl: 'views/home.html',
    controller: 'homeController',
    params: {
        id: { squash: true, value: null },
        token: { squash: true, value: null }
    }
})

Answer 3

如果你不介意有一些额外的状态，下面的代码允许真正的可选参数。

我通过添加抽象属性将原始状态转换为抽象状态，然后创建了两个子状态，一个具有params的url，另一个具有引用父级的空白url。

它在我的开发站点上运行良好，并且不需要尾随斜杠，事实上，如果你想要尾随斜杠，你必须添加状态/何时为它。

  .state('myState.search', {
    url:'/search',
    templateUrl: urlRoot + 'components/search/search.view.html',
    controller: 'searchCtrl',
    controllerAs: 'search',
    abstract: true,
  })
  .state('myState.search.withParams', {
    url:'/:type/:field/:operator/:value',
    controller: 'searchCtrl',//copy controller so $stateParams receives the params
    controllerAs: 'search'
  })
  .state('myState.search.noParams', {
    url:''
  });

AngularJS ui-router可选参数

3 个答案: