javascript - 用户界面路由器 : Transform parameter from URL

Question

有没有可能透明地转换 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'
})

问题:在每个 Controller 中，我需要调用一个函数来将 $state 参数转换为单数形式 (toSingular($stateParams.type))，以及何时建立链接，我需要反过来做同样的事情。这非常繁琐且容易出错。

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

对于 URL /shopping/berries/12345 我将有一个 $stateParams.type === 'berry'，当通过 ui 创建 URL 时-sref="shop.product({type: 'berry', id: '12345'})" 我将再次获取 URL /shopping/berries/12345。

我一直在努力寻找一个可以集成此逻辑但没有成功的钩子(Hook)。非常感谢任何反馈!

Answer 1

您想注册一个自定义参数类型。

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

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