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

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

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

Answer 2

有a working plunker

这里的解决方案可能有两种类型。第一个真的非常有活力。第二种是根据需要工作，更严格一些，但受益于 UI-Router 内置功能。

我。动态方法

让我们观察第一个，这很有趣（但在我们的场景中可能太复杂了）。跟这个Q&A很像

Recursive ui router nested views

我们尝试解决 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)}],
    }
 })

二． UI-路由器内置功能`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 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.

在action here

中查看

Answer 3

简答....

.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 4

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

params: {
  thing1: ""
}

根据Angular UI Router docs，设置默认值自动使参数可选。

Angular UI-Router 一个状态下更多的可选参数

Angular UI-Router more Optional Parameters in one State

javascript

angularjs

angular-ui