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',
  ...

這將導致一個param 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中如何表示默認參數值。 如果未設置壓縮，則使用配置的默認壓縮策略。

在這里檢查它

Answer 3

另一種簡單的方法是只為參數設置一個默認值，如下所示：

params: {
  thing1: ""
}

根據Angular UI路由器文檔 ，自動設置默認值使參數可選。

Answer 4

您可以使用ui-sref傳遞可選參數。 然后，您可以使用$ stateParams服務在控制器中訪問它們。 未傳遞的參數將保持為null。

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