Question

如何定义具有两个可选参数的一个路线并允许提供无参数，一个或两个参数？...

http://localhost/login
http://localhost/login/abc123
http://localhost/login/abc123/joe.blow@nowhere.com

我已经阅读了UrlMatcher上的文档并查看了几个SO问题。似乎没什么用。一旦在UI-Router路由上定义了可选参数，我就无法解决基本路由（没有参数）。不会产生错误，但永远不会显示视图。强制执行此操作的唯一方法是定义三个不同的路径：

$urlRouterProvider.otherwise("/login");
$stateProvider
.state("login", {
    url: "/login",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
})
.state("loginWithAppId", {
    url: "/login/:appId",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
})
.state("loginWithParams", {
    url: "/login/:appId/:emailAddress",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
});

我的目标是只允许一条路线，但允许发送无，一条或两条参数：

$urlRouterProvider.otherwise("/login");
$stateProvider
.state("login", {
    url: "/login/:appId/:emailAddress",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
});

Answer 1

这是一个包含您的代码的Plunker，只有一个具有多个可选路由的状态：

http://plnkr.co/edit/rgi9MoDKI5ncJcnchb4j?p=preview

HTML：

<body ng-controller="appController as appCtrl">
<a ui-sref='login({appId:null,emailAddress:null})'>login(NONE)</a>
&nbsp;&nbsp;<a ui-sref='login({appId:123,emailAddress:null})'>login(ONE)</a>
&nbsp;&nbsp;<a ui-sref="login({appId:123,emailAddress:'a@b.com'})">login(BOTH)</a>
<div ui-view=""></div>

配置：

.config(function ($stateProvider) {
  $stateProvider.state("login", {
    url: "/login/:appId/:emailAddress",
    params: {
      appId: null,
      emailAddress: null
    },
    templateUrl: "login.html",
    controller: 'LoginController',
    controllerAs: 'LoginCtrl'
 })
})

控制器：

.controller('LoginController',function($stateParams){
  var self = this;

  self.appId = $stateParams.appId;
  self.emailAddress = $stateParams.emailAddress;
});

登录页面：

<div>appId:{{LoginCtrl.appId}}</div>
<div>emailAddress:{{LoginCtrl.emailAddress}}</div>

希望这适合你

AngularJS中的多个可选路由参数不起作用

1 个答案: