web-dev-qa-db-ja.com

Angular UI-Routerの1つの状態のオプションパラメータ

クエリ文字列を使用せず、1つのルート名のみを使用して、ルートにオプションのパラメーターを許可するにはどうすればよいですか？現在、各ルートを5回指定して、パーツの任意の組み合わせを許可しています。

すべてのパーツはオプションである必要があります。ルートはバリエーションを解決する必要があります。

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

より簡単で、きれいで、/くない方法が必要です。

javascriptangularjsangular-ui-routerangular-ui
21
G. Deward

短い答え....

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

作業中のプランカー があります

ここでの解決策には2つのタイプがあります。最初は非常に動的です。 2番目は必要に応じて機能し、もう少し厳格ですが、UI-Router組み込み機能。

I.動的アプローチ

興味深い（しかし、このシナリオでは複雑すぎるかもしれません）。このQ＆Aとよく似ています

再帰的な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',
  ...

そして、それは完全なフォルダーパスを持つ1つのパラメーターfolderPathにつながります。

シナリオを解決したい場合（ちょうど3つのパラメーターを処理します）このようなものを拡張できます

ファイル処理用のコントローラー：

.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ルーターの組み込み機能params : {}

2番目のシナリオは、実際には非常に単純です。それは使用しています 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でデフォルトパラメーター値がどのように表されるかを構成します。スカッシュが設定されていない場合、設定されたデフォルトのスカッシュポリシーが使用されます。

ここでのアクション で確認してください

21
Radim Köhler

これを行うもう1つの簡単な方法は、次のようにパラメーターのデフォルト値を設定することです。

params: {
  thing1: ""
}

Angular I Router docs によれば、デフォルト値を設定するとパラメーターは自動的にオプションになります。

2
Nick A. Watts