Question

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

我想要达到这样的目的：

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

所以“city”是可选的。

感谢您提供任何意见。

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 add default parmeter

有一个working 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'
    ...
})

检查工作示例（使用语言而不是城市）here。有关详细信息，请参阅原始Q & A

Answer 3

我认为没有理由不在标准******状态设置中执行此操作。

<强> DEMO

<强> JAVASCRIPT

ui-router

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

3 个答案: