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

11 浏览
0 Comments

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

如何在不使用查询字符串的情况下，只使用一个路由名称允许可选参数？目前，我正在指定每个路由五次，以允许任何组合的部分：

所有部分必须是可选的。路由必须解析任何变化。

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

一定有一种更简单、更清晰、更不丑陋的方法。

0

3 答案

0 Comments

Angular UI-Router中一个状态中有多个可选参数的原因是为了处理包含未知数量文件夹（目录）名称的URL。该问题有两种解决方法。

第一种方法是非常动态的，但在这种情况下可能过于复杂。它与Recursive ui router nested views中的问题非常类似。我们试图解决包含未知数量文件夹名称的URL：

状态可以定义如下：

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

使用解析器的状态定义：

// 帮助方法
var findParams = function($stateParams, position) {
   var parts = $stateParams.folderPath.split('/')
   var result = parts.length >= position ? parts[position] : null;
   return result;
}
// 状态调用解析器来解析参数并将它们传递给控制器
.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-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},
    }
})

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

这是其中一个解决方法的关键：

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

在这里可以查看示例。感谢您的回答，祝您使用强大的UI-Router愉快。

0
0 Comments

Angular UI-Router是一个用于构建单页应用程序的强大工具，它允许我们使用状态来定义不同页面之间的导航。在使用UI-Router时，有时会遇到需要在一个状态中传递多个可选参数的情况。

问题的出现是因为UI-Router默认情况下只支持一个可选参数。但是有时我们需要在一个状态中传递多个可选参数，这时就需要找到解决方法。

解决方法是在状态的定义中使用params属性来指定可选参数。在params属性中，我们可以使用squash和value选项来指定参数的行为。squash选项可以将参数压缩为URL中的一个斜线，而value选项可以指定参数的默认值。

下面是一个示例代码，演示了如何在一个状态中传递多个可选参数：

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

在上面的代码中，我们定义了一个名为'login'的状态，它有四个可选参数：a、b、c和d。这些参数将会以URL的形式传递给状态的模板和控制器。使用squash选项，我们可以将这些参数压缩为URL中的一个斜线。使用value选项，我们可以指定这些参数的默认值为null。

通过使用params属性和适当的选项，我们可以在一个状态中传递多个可选参数，从而解决了UI-Router默认只支持一个可选参数的问题。这样，我们就可以更灵活地定义我们的应用程序的导航和状态。

0
0 Comments

在Angular UI-Router中，有时我们需要在一个状态中设置多个可选参数。然而，当我们尝试在一个状态中设置多个可选参数时，可能会遇到一些问题。

解决这个问题的方法之一是为参数设置一个默认值。根据Angular UI-Router文档的说明，设置一个默认值会自动将参数设置为可选的。

代码示例如下：

params: {
  thing1: ""
}

通过将参数的默认值设置为空字符串，我们可以确保该参数在使用时是可选的。

这种方法简单易行，适用于在一个状态中设置多个可选参数的情况。通过将参数的默认值设置为空字符串，我们可以在需要的时候传入具体的值，而在不需要的时候可以省略该参数。

这样，我们就可以在Angular UI-Router中更灵活地定义和使用可选参数了。

0