Question

我已经开始使用angular的ui-router，我试图找出如何让多个URL引用单个状态。例如：

/orgs/12354/overview
//retyrns the same pages as
/org/overview

我的$ state提供程序目前设置了这样的东西，并且我不清楚如何在别名'/ org / overview'路径中滑动，以便它正确地从'org'父级继承。

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '/overview',
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'

})

Answer 1

这可以使用when()来实现。假设这是您想要使用多个网址指向的状态。

.state('app.home',
  {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })

在config()中，您可以使用when()，如下所示：

angular.module('myApp', [])
   .config($urlRouterProvider){
       $urlRouterProvider.when(/homepage, ['$state','$match', function ($state, $match) {
          $state.go('app.home');
 }]);
}

同样，您可以添加多个指向同一状态的网址。

Answer 2

我认为您只需要定义没有下面的URL的子状态。

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.1', {
  templateUrl: '/client/overview/one.html',
  controller: 'OverviewCtrl'
})
.state('org.2', {
  templateUrl: '/client/overview/two.html',
  controller: 'OverviewCtrl'
})
.state('org.3', {
  templateUrl: '/client/overview/three.html',
  controller: 'OverviewCtrl'
})

Answer 3

首先，抽象状态不会返回视图。

此外，由于您尝试使用复数orgs作为列表视图，而单数org用于项目视图，因此您无法使用附加路线，是默认行为。

.state('org', {
  url: '/orgs',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '^/org/:orgID/overview'
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'
})

Angular UI-Router：单个状态的多个URL

3 个答案: