Question

根据我对Angular2路由器文档的理解，路由配置默认pathMatch策略是“prefix”， “prefix”pathMatch策略意味着app路由器只需要查看url的开头并将其与正确的路由匹配。

参考：https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#matching-strategy

话虽如此，通过以下配置，如果我导航到ExampleComponent，我会假设此路线应加载/abcdefg。

这不起作用的一个问题，我不确定有什么问题，我无法在谷歌或@angular/router源代码中找到有关此内容的更多信息。

感谢您的帮助。

const ROUTES: Routes = [
  { path: '', component: MainLayoutComponent, pathMatch: 'prefix', canActivate: [AuthGuard], children: [
    { path:'abc', pathMatch: 'prefix', component: ExampleComponent},
    { path: '', component: HomepageComponent }
  ]},
 ];


 export const ROUTING = RouterModule.forRoot(ROUTES, { useHash: false });

更新＃1，尝试GünterZöchbauer建议。

新的路由器配置是：

现在/abc/defg有效，但不是/abcdefg

{ path:'abc', pathMatch: 'prefix',
  children: [
    { path:'**', component:ExampleComponent},
  ]
}

Answer 1

如果您的path: 'abc'路线的子路线包含path: 'defg'或path: '**'或path: 'de'且子路线的路线为path: 'fg'，则可以使用此功能。

pathMatch: 'full'表示整个URL路径需要匹配并由路由匹配算法使用。

pathMatch: 'prefix'表示选择路径与URL开头匹配的第一条路由，但路由匹配算法正在继续搜索其余URL匹配的匹配子路由。

Answer 2

问题是你在说：

{ path: '', component: MainLayoutComponent, pathMatch: 'prefix'

基本上说：

查找任何以空格开头的网址（''），简单来说，所有网址始终都没有。

考虑此网址/google

或此网址

如果你运行一个正则表达式，并说这些网址与''匹配，是的，是的。

除非你说起始(^)和结尾($)位也应该匹配，在这种情况下，start和两者匹配，但结尾只会匹配空url。

这就是他们创建full前缀的原因，也就是说，网址应完全匹配。

Answer 3

所以，有人问我是如何解决这个问题的，

首先我添加了一条新路线作为所有其他路线的后备，如下所示：

{path: ':url', loadChildren: './fallback/fallback.module#FallbackModule'}

然后在fallbackComponent内部，我们根据路由器导航结束事件上的url决定加载哪个模块。

在我的情况下，如果url是/ @ somestring，我想加载profileComponent并调用一些API

  ngOnInit() {
    this.router.events.filter(event => event instanceof NavigationEnd)
      .subscribe((event) => {
        this.parseUrl(this.router.url);
      });
  }

  parseUrl(url: string) {
    let data = {};
    let parts: string[] = url.split('/');
    parts = parts.filter((item) => !!item);
    if (parts[0] && parts[0].indexOf('@') === 0) {
      data['component'] = 'profile';
      data['username'] = parts[0].replace('@', '');
    }
    this.viewData = data;
  }

并在模板中：

<template [ngIf]="viewData && viewData['component'] == 'profile'">
  <user-profile
    [title] = "viewData['view']"
    [username] = "viewData['username']"
  ></user-profile>
</template>

另外值得一提的是，我们还必须覆盖DefaultUrlSerializer.serialize以禁用网址中特殊字符（@）的自动编码。

Angular2路由器配置，前缀pathMatch不起作用

3 个答案: