javascript – ui-router：从URL转换参数

2019年7月20日 187次阅读

是否有可能透明地转换URL参数？由于这有点难以解释,我将给出一个场景.我们有一个类似于这个的URL结构：

/shopping/nuts/:productId
/shopping/berries/:productId
/shopping/juice/:productId

我们在应用程序中显示的产品(由某些API提供)可能如下所示：

{ type: 'berry', price: 123, text: 'lorem ipsum', id: '12345' }

请注意单数和复数形式之间的差异：URL包含复数,例如’berries’,而我们的REST API提供的产品使用单一形式’berry’.

我们的州定义的部分看起来像这样：

.state('shop.product', {
  url: '/shopping/:type/:productId',
  templateUrl: 'type.html',
  controller: 'TypeController'
})

问题：在每个控制器中,我需要调用一个函数将$state参数转换为单数形式(toSingular($stateParams.type)),并且在构建链接时,我需要反过来做同样的事情.这非常繁琐且容易出错.

所以,我理想的解决方案就是这样的

对于URL / shopping / berries / 12345,我将有一个$stateParams.type ===’berry’,当通过ui-sref =“shop.product({type：’berry’,id：’12345′)创建URL时})“我将再次获得URL / shopping / berries / 12345.

我一直在敲桌子,试图找到一个钩子,我可以整合这个逻辑而没有任何成功.任何反馈非常感谢！

最佳答案 您想要注册自定义参数类型.

https://ui-router.github.io/docs/latest/classes/url.urlmatcherfactory.html#type

您的参数类型应对URL中的值进行编码和解码.

要进行编码,请使用内部表示(nut,berry等)并返回要在URL中显示的字符串.

要解码,请从URL中获取字符串并返回内部值.

 var productTypes = {
    berry: ['berries', 'berry'],
    nut: ['nuts', 'nut'],
    juice: ['juice'],
  }

  $urlMatcherFactoryProvider.type('productType', {
    encode: val => 
      productTypes[val][0],
    decode: string =>
      Object.keys(productTypes).find(key => productTypes[key].indexOf(string) !== -1),
  });

这是一个演示代码的plunker：http://plnkr.co/edit/Eed8h7U6x0j8RAWs7qT9?p=preview

点赞