角ui路由器在一种状态下有更多可选参数

How can I allow optional parameters to my routes without using a query string and only using one route name? I am currently specifying each route FIVE TIMES to allow for any combination of parts:

如何在不使用查询字符串、只使用一个路由名称的情况下允许路由的可选参数?我目前正在五次指定每条路线，以考虑各部分的组合:

All parts must be optional. Route must resolve any variation.

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

.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" })

There MUST be an easier / cleaner / less ugly way.

一定有一种更简单/更清洁/不那么难看的方式。

4 个解决方案

#1

Short answer....

简短的回答....

.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 },
    }
})

#2

There is a working plunker

有一个工作的活塞

Solution here could be of two types. The first is really very dynamic. The second is working as needed, a bit more rigid, but profiting from UI-Router built-in features.

这里的解决方案可以有两种类型。第一个是非常动态的。第二种是按需要工作，有点死板，但从ui -路由器内置功能中获利。

I. Dynamic approach

Let's observe the first, which is interesting (but maybe too much complicated in our scenario). It is very similar to this Q & A

让我们观察第一个，这很有趣(但在我们的场景中可能太复杂了)。它与这个Q & A非常相似

Recursive ui router nested views

递归ui路由器嵌套视图

We try to solve the url which contains unknown amount of folders*(directories)* names:

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

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

State could be define like this:

状态的定义如下:

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

And that will lead to one param folderPath with the complete folder path.

这将导致一个包含完整文件夹路径的param folderPath。

In case we would like to solve our scenario (handle exactly three params) we could extend stuff like this

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

Controller for File handling:

控制器文件处理:

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

State definition using resolver:

使用解析器状态定义:

// 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 built-in feature params : {}

The second scenario, is in fact very very simple. It uses UI-Router built in feature: params : {}. Check its documentation here:

第二种情况，实际上非常简单。它使用UI-Router内置的特性:params:{}。检查它的文档:

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

http://angular-ui.github.io/ui-router/site/ / api / ui.router.state。stateProvider美元

This would be our state definition:

这就是我们国家的定义:

.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},
    }
})

And all these links will work as well:

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

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

And what was the trick:

有什么诀窍:

squash - {bool|string=}: squash configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value. If squash is not set, it uses the configured default squash policy.

壁球- {bool|string=}:壁球配置当当前参数值与默认值相同时，如何在URL中表示默认参数值。如果未设置壁球，则使用配置的默认壁球策略。

Check it in action here

在这里检查一下

#3

Another simple way to do this is to just set a default value for the parameter, like this:

另一种简单的方法是为参数设置一个默认值，如下所示:

params: {
  thing1: ""
}

According to the Angular UI Router docs, setting a default value automatically makes the parameter optional.

根据角度UI路由器文档，设置默认值将自动使参数可选。

#4

You can pass optional parameters using ui-sref. You can then access them in your controller using the $stateParams service. Parameters that don't get passed would just remain null.

可以使用ui-sref传递可选参数。然后，您可以使用$stateParams服务在控制器中访问它们。未传递的参数将保持为空。

.state("loginABCD", 
  { url: "/login/:a/:b/:c/:d",
    templateUrl: "login.html"
    controller: function($stateParams) {
      console.log($stateParams.a + $stateParams.b);
      }
  })