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

问题描述

据我从 Angular2 路由器文档中了解到，路由配置默认路径匹配策略是前缀"，前缀"路径匹配策略意味着应用路由器只需要查看 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.

这不起作用的一个问题，我不确定是什么问题，我在谷歌或 @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ünter Zö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.

在我的例子中，如果 url 是/@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屋！