Angular使用ui.router进行参数传递的多种方式

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

你同样可以使用params对象为路由参数设置一个默认值。
使用<a ui-sref="a({id: 1})>non-url route params</a>产生的路径为/a,但是你仍然可以在$stateParams获取到参数。

💎

🚪demo传送门

🚪api传送门