Angular2路由器配置，前缀pathMatch不起作用 [英] Angular2 router config, prefix pathMatch does not work

问题描述

据我从Angular2路由器文档中了解到，路由配置默认pathMatch策略为前缀"， 前缀" pathMatch策略意味着应用路由器只需要查看url的开头，并将其与正确的路由进行匹配即可.

From what I understand from Angular2 router documentation, the routes config default pathMatch strategy is "prefix", "prefix" pathMatch strategy means the the app router only needs to look on the start of the url and match it with the proper route.

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

话虽如此，在以下配置中，如果我导航到/abcdefg，我将假定此路由应加载ExampleComponent.

That been said, with the below configurations I would assume that this route should load ExampleComponent if I navigate to /abcdefg.

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

One problem that this is not working, am not sure what is wrong and i cant find much information about this on google or in @angular/router source code.

谢谢您的帮助.

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建议.

Update #1, Trying Günter Zöchbauer suggestion.

新路由器配置为:

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

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

推荐答案

所以，有人问我如何解决此问题，

so, someone was asking me how i solved this issue,

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

first i added a new route as a fallback to all other routes, something like this:

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

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

then inside fallbackComponent we decide what module to load based on the url on router navigation end event.

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

in my case, if the url was /@somestring, i wanted to load the profileComponent and call some APIs

  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才能禁用对网址中特殊字符(@)的自动编码.

also worth to mention that we also had to override DefaultUrlSerializer.serialize to disable auto encoding for special characters (@) in urls.

这篇关于Angular2路由器配置，前缀pathMatch不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！