Angular使用ui.router進行參數傳遞的多種方式

原創

enl0ve

2020-02-22 02:58

在Angular中使用ui.router進行參數傳遞的多種方式

在實際工作中，我需要實現點擊一個物體並重定向到物體的具體詳情的頁面的需求，爲了實現這個功能，需要用到ui.router進行參數傳遞。在實現後，我將路由的參數傳遞實現的多種方式進行整理。

查詢參數（Query Parameters）

查詢參數將會被映射到UI Router的$stateParams中，可以在$stateProvider的state的屬性的url模板中進行配置。

    $stateProvider.state('a', {
        url: '/a?paramA',
        templateUrl: 'new.html',
        controller: function ($scope, $stateParams) {
            $scope.paramA = $stateParams.paramA;
        }
    })

你可以在ui-sref中創建一個鏈接指向這個狀態

    <a ui-sref="a({paramA: 1})">new Query String</a>

此時導航欄中的url看起來是這樣的/a?paramA=1

當然，如果你想要傳遞多個參數，你可以使用&

    $stateProvider.state('b', {
        url: '/b?paramA&paramB',
        templateUrl: 'new.html',
        controller: function ($scope, $stateParams) {
            $scope.paramA = $stateParams.paramA;
            $scope.paramB = $stateParams.paramB;
        }
    })

你可以在ui-sref中創建一個鏈接指向這個狀態。

    <a ui-sref="b({paramA: 1, paramB: 2})">multiple Query String</a>

此時導航欄中的url看起來是這樣的/a?paramA=1&paramB=2

可選的路由參數（optional Route Parameters）

在UI Router中，路由參數默認是可選的。這就意味着下面的/a/1和/a/都是可行的，但是/a是不行的。導航欄中的?後墜往往告訴你在一個url中查詢部分的是從這裏開始的，比如/a/:id?

    $stateProvider.state('a', {
        url: '/a/:id',
        templateUrl: 'new.html',
        controller: function ($scope, $stateParams) {
            $scope.id = $stateParams.id;
        }
    })

使用<a ui-sref="a({id: 1})>optional route param</a>來產生/a/1;

當然，如果想要傳遞多個參數的話，可以這樣使用url: '/a/:id/:paramA'，<a ui-sref="a({id: 1, paramA: 2})>multiple optional route param</a>產生的路徑是/a/1/2。

不使用帶參數的URL（Non-URL route parameters）

如果你不喜歡在URL中使用/,你可以使用下面這種狀態。

    $stateProvider.state('a', {
        url: '/a',
        params: {
            id: null
        },
        templateUrl: 'new.html',
        controller: function ($scope, $stateParams) {
            $scope.id = $stateParams.id;
        }
    })