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

时间:2016-10-09 15:14:50

标签: angular angular2-routing

根据我对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},
  ]
}

3 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:1)

问题是你在说:

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

基本上说:

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

考虑此网址/google

或此网址

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

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

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

答案 2 :(得分:0)

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

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

{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以禁用网址中特殊字符(@)的自动编码。