regex - 将 url 与 AngularJS ui-router 中的单词数组列表匹配

Question

使用 AngularJS + ui-router，我需要将 url 与单词列表匹配:

但是，使用正则表达式我尝试使用一两个单词并且它有效

 url: '/{source:(?:John|Paul)}/:id'

但我需要将我的网址与单词列表相匹配。

例子:
var sourceList = ['John', 'Paul', 'George', 'Ringo'];
url: '/{source:(?:sourceList)}/:id'

有没有办法将我的网址与匹配的数组列表进行比较？

Answer 1

不完全确定您正在搜索什么......因为它可能是一个动态 url 匹配器或只是智能正则表达式。这是一个 plunker with working example .事实上，它 1) 仅从传递的名称列表构建正则表达式... 2) 显示 urlMatcher在行动

答案是:使用 UrlMatcher .

$urlMatcherFactory and UrlMatchers

Defines the syntax for url patterns and parameter placeholders. This factory service is used behind the scenes by $urlRouterProvider to cache compiled UrlMatcher objects, instead of having to re-parse url patterns on every location change. Most users will not need to use $urlMatcherFactory directly, however it could be useful to craft a UrlMatcher object and pass it as the url to the state config.

例子:

var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1");
$stateProvider.state('myState', {
    url: urlMatcher 
});

plunker中的例子:

  var sourceList= ['John', 'Paul', 'George', 'Ringo']
  var names = sourceList.join('|');
  var urlMatcher = $urlMatcherFactory.compile("/{source:(?:" + names + ")}/:id");

  $stateProviderRef 
    .state('names', { 
      url: urlMatcher,
      templateUrl: 'tpl.root.html',
      controller: 'MyCtrl'
    });

example显示了一个更复杂的解决方案。如果我们在配置阶段确实有名称列表......简单连接应该可以工作。但是如果以后可以通过 .run() 使用( $http ) ...此解决方案可以提供帮助