Question

考虑具有查询参数的状态的这种情况。我想将它们声明为标志，以便我可以在控制器中获取并获取true，false或undefined

$stateProvider.state('foo.bar', {
         url: '/foobar?flag1&flag2',
         templateUrl: 'foo/bar/template.tpl.html',
         controller: 'FooBarCtrl'
});

myModule.controller('FooBarCtrl', function($stateParams){
         $stateParams.flag1 <<--- is string but can it be of type bool?
         $stateParams.flag2 <<--- is string but can it be of type bool?

});

一些网址示例：

/foobar?flag1=true    -->> should yield {flag1: true, flag2: undefined}
/foobar?flag2=false    -->> should yield {flag1: undefined, flag2: false}
/foobar?flag1=false&flag2=true    -->> should yield {flag1: false, flag2: true}
/foobar?flag1=1&flag2=0    -->> should yield {flag1: true, flag2: false}

etc...

目前$ stateParams只提供字符串。有没有让路由器解析params作为标志？这比在控制器中手动解析要优雅得多。

Answer 1

您应该能够将 bool 用作类型

url: '/foobar?{flag1:bool}&{flag2:bool}',

但我们甚至可以使用自定义类型（让我们称之为 boolean ）：

app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {
  $urlMatcherFactory.type('boolean',
{
 name : 'boolean',
 decode: function(val) { return val == true ? true : val == "true" ? true : false },
 encode: function(val) { return val ? 1 : 0; },
 equals: function(a, b) { return this.is(a) && a === b; },
 is: function(val) { return [true,false,0,1].indexOf(val) >= 0 },
 pattern: /bool|true|0|1/
})
}]);

url 的状态def将是这样的：

url: '/foobar?{flag1:boolean}&{flag2:boolean}',

这应该有效：

<a ui-sref="foobar({ flag1: 0, flag2:true })">
<a ui-sref="foobar({ flag1: 1, flag2:false })">

这是plunker with example

Answer 2

最终以下内容对我有用：

    var stringToBoolean = function (s) {
        if (typeof s != 'string') {
            return undefined
        }

        if (/1|true|TRUE/.test(s)) {
            return true
        } else if (/0|false|FALSE/.test(s)) {
            return false
        } else {
            return undefined
        }
     };

     $stateProvider.state('foo.bar', {
                 url: '/foobar?{flag1}',
                 ...
                 onEnter: function ($stateParams) {
                        $stateParams.flag1 = stringToBoolean($stateParams.flag1);
                 }
      });

它感觉不是很干净，我宁愿把这个功能集成到ui-router中，但至少我能够通过这种方式在状态级别解决这个问题，而不会污染我的控制器逻辑。

Angular ui路由器解析查询参数到布尔值

2 个答案: