Angular UI-Router更多可选参数在一个状态中

Question

如何在不使用查询字符串且仅使用一个路由名称的情况下允许可选参数到路由中？我目前正在指定每个路线五次以允许任何部件组合:

所有部件必须是可选的.路线必须解决任何变化.

.state("login", { url: "/login", templateUrl: "login.html", params: { a: null, b: null, c: null, d: null } })
.state("loginA", { url: "/login/:a", templateUrl: "login.html", params: { b: null, c: null, d: null } })
.state("loginAB", { url: "/login/:a/:b", templateUrl: "login.html", params: { c: null, d: null } })
.state("loginABC", { url: "/login/:a/:b/:c", templateUrl: "login.html", params: { d: null } })
.state("loginABCD", { url: "/login/:a/:b/:c/:d", templateUrl: "login.html" })

必须有一个更容易/更清洁/更少丑陋的方式.

Answer 1

简短回答....

.state('login', {
    url: '/login/:a/:b/:c/:d',
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl',
    params: {
        a: { squash: true, value: null },
        b: { squash: true, value: null },
        c: { squash: true, value: null },
        d: { squash: true, value: null },
    }
})

Answer 2

有一个工作的plunker

这里的解决方案可以有两种类型.第一个是非常有活力的.第二种是根据需要工作,更加严格,但可以从UI-Router内置功能中获益.

I.动态方法

让我们观察第一个,这很有意思(但在我们的场景中可能过于复杂).它与此问答非常相似

递归ui路由器嵌套视图

我们尝试解决包含未知数量的文件夹*(目录)*名称的URL:

<a href="#/files/Folder1">
<a href="#/files/Folder1/SubFolder1/">
<a href="#/files/Folder1/SubFolder1/SubFolderA">

州可以这样定义:

.state('files', {
  url: '/files/{folderPath:[a-zA-Z0-9/]*}',
  templateUrl: 'tpl.files.html',
  ...

这将导致一个folderPath完整文件夹路径的参数.

如果我们想要解决我们的场景(正好处理三个参数),我们可以扩展这样的东西

文件处理控制器:

.controller('FileCtrl', function($scope, a, b, c) {
    $scope.paramA = a; 
    $scope.paramB = b; 
    $scope.paramC = c; 
})

使用解析器的状态定义:

// helper method
var findParams = function($stateParams, position) {
   var parts = $stateParams.folderPath.split('/')
   var result = parts.length >= position ? parts[position] : null;
   return result;
  }

...

// state calls resolver to parse params and pass them into controller
.state('files', {
    url: '/files/{folderPath:[a-zA-Z0-9/]*}',
    templateUrl: 'tpl.files.html',
    controller: 'FileCtrl',
    resolve: {
        a : ['$stateParams', function($stateParams) {return findParams($stateParams, 0)}],
        b : ['$stateParams', function($stateParams) {return findParams($stateParams, 1)}],
        c : ['$stateParams', function($stateParams) {return findParams($stateParams, 2)}],
    }
 })

II.UI-Router内置功能params : {}

第二种情况实际上非常简单.它使用UI-Router内置功能:params : {}.在这里查看其文档:

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$ stateProvider

这将是我们的州定义:

.state('login', {
    url: '/login/:a/:b/:c',
    templateUrl: 'tpl.login.html',
    controller: 'LoginCtrl',
    params: {
        a: {squash: true, value: null},
        b: {squash: true, value: null},
        c: {squash: true, value: null},
    }
})

所有这些链接也将起作用:

<a href="#/login">
<a href="#/login/ValueA">
<a href="#/login/ValueA/ValueB">
<a href="#/login/ValueA/ValueB/ValueC">

诀窍是什么:

squash- {bool|string=}:squash配置当前参数值与默认值相同时,URL中如何表示默认参数值.如果未设置压缩,则使用配置的默认压缩策略.

在这里检查它