Geek Answers Handbook

Angular2 router configuration, pathMatch prefix not working

From what I understand from the documentation for the Angular2 router, the default config config route strategy is “prefix”. The “prefix” pathMatch strategy means that the application router only needs to look at the beginning of the URL and map it to the corresponding route.

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

It was said that with the configurations below, I would suggest that this route should load ExampleComponent if I go to /abcdefg .

One problem: this does not work , I'm not sure what is wrong, and I can not find much information about this in google or in the @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, an attempt by Günter Zöchbauer.

new router configurations:

now /abc/defg works, but not /abcdefg

 { path:'abc', pathMatch: 'prefix', children: [ { path:'**', component:ExampleComponent}, ] }
+6
source share
3 answers

So, someone asked me how I solved this problem,

I first added a new route as a reserve to all other routes, something like this:

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

then inside fallbackComponent we decide which module to load based on the URL at the end of the router's navigation event.

in my case, if url was / @ somestring, I wanted to load 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>

It's also worth mentioning that we also had to redefine DefaultUrlSerializer.serialize to disable automatic encoding for special characters (@) in URLs.

0
source

This will work if your route path: 'abc' 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 entire URL path must match and is consumed by the route matching algorithm.

pathMatch: 'prefix' means that the first route is selected where the path matches the beginning of the URL, but then the route matching algorithm continues to search for the corresponding child routes where the remaining URL is.

+3
source

The problem is what you say:

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

which basically says:

Finding any url that starts with nothing ('') is simple enough, all URLs always start from scratch.

Consider this url /google

Or this url

if you run Regex and tell me if these URLs match "?", yes, yes.

If you do not say that the start bit (^) and end ($) should also match, that in this case the start will match for both of them, but the end will only match empty URLs.

That they created the prefix full , as they say, must exactly match the URL.

+1
source

More articles:


All Articles