在角度ui-router URL中添加可选属性

Question

有没有办法在ui-router的url开头有一个可选属性？如果是这样,怎么样？

我想要达到这样的目的:

.state('events',{
    url: '(/city:)?/events/:id'
    ...
})

所以"城市"是可选的.

感谢您的任何输入.

Answer 1

让两条独立的路由指向同一个状态可能是不好的做法,但没有什么能阻止您创建使用相同分辨率/控制器/模板的两个不同状态.

$stateProvider
.state('state1', {
  url: "/:city/events/:id",
  templateUrl: "partials/events.html",
  controller: eventsCtrl
})
.state('state2', {
  url: "/events/:id",
  templateUrl: "partials/events.html",
  controller: eventsCtrl
});

function eventsCtrl($scope){
  // shared controller
}

同样,这可能是不好的做法,但我想不出更好的解决方案

Answer 2

我试着在这里回答类似的(如果不相同):

Angular js - route-ui添加默认参数

有一个工作的plunker,解决了一个问题language而不是一个(但概念是相同的)city

所以,我们会/应该引入一些超级状态'root'.

在我们的例子中,我们甚至可以使用一些正则表达式来限制允许的值 - 因为很难猜出什么是city什么,什么是什么events

.state('root', {
    url: '/{city:(?:Prague|Bristol|Denver)}',
    abstract: true,
    template: '<div ui-view=""></div>',
    params: {lang : { squash : true, value: 'Prague' }}
})

这里重要的是设置params : {}.它说,默认值是'布拉格' - 所以如果没有选择,那将是城市.同样重要的是 - 它应该被压扁,如果与'布拉格'参数值匹配则跳过:

params: {lang : { squash : true, value: 'Prague' }}

现在,我们可以引入一些嵌套状态,它们将'root'声明为它们的父级:

.state('events',{
    parent: 'root',
    url: '/events/:id'
    ...
})

检查工作示例(用语言,而不是市)这里.有关详细信息,请参阅原始问答