7

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.

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

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

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.

Thank you for your help.

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 });

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

new router configurations are:

now /abc/defg works but not /abcdefg

{ path:'abc', pathMatch: 'prefix',
  children: [
    { path:'**', component:ExampleComponent},
  ]
}
 
improve this question
5

That would work if your path: 'abc' route had a child route with path: 'defg' or path: '**' or path: 'de' and the child route had a route with path: 'fg'.

pathMatch: 'full' means, that the whole URL path needs to match and is consumed by the route matching algorithm.

pathMatch: 'prefix' means, the first route where the path matches the start of the URL is choosen, but then the route matching algorithm is continuing searching for matching child routes where the rest of the URL matches.

improve this answer
  • Thank you for your answer, i tried your suggestion, now abc/de works, but not abcde, i'll update the question now to show you the new configurations. – Anas Al Hamdan Oct 10 '16 at 8:42
  • Sorry, I didn't explain that part properly. That is only supposed to work with abc/de but not with abcde. In praxis pathMatch is only to decide if the route matching algorithm should continue searching with an empty path on child routes when '' already matched on the parent route. This is a special case because it's hard to now if "nothing" should be consumed when it matches or not. I don't know of other use cases for pathMatch. – Günter Zöchbauer Oct 10 '16 at 8:50
1

The problem is you're saying :

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

which basically saying :

Find any url that starts with nothing ('') and simply enough, all the urls always start with nothing.

Consider this url /google

Or this url 

if you run a Regex and say does these urls match to ''?, yes the do.

Unless you say the starting (^) and ending ($) bit should match too, which in that case, starting will match for both of them , but ending will only match to the empty url.

That's what they've created the full prefix , as to say , the url should exactly match .

0

正确答案

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'}

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

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;
  }

and in the template:

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

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

 来自  https://stackoverflow.com/questions/39945137/angular2-router-config-prefix-pathmatch-does-not-work