Created
February 7, 2017 23:16
-
-
Save matanshukry/22fae5dba9c307baf0f364a9c9f7c115 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright (c) Matan Shukry | |
* All rights reserved. | |
*/ | |
import { UrlSegment, UrlSegmentGroup, Route } from '@angular/router'; | |
// export type UrlMatchResult = { | |
// consumed: UrlSegment[]; posParams?: { [name: string]: UrlSegment }; | |
// }; | |
export function ComplexUrlMatcher(paramName: string, regex: RegExp) { | |
return ( | |
segments: UrlSegment[], | |
segmentGroup: UrlSegmentGroup, | |
route: Route) => { | |
const parts = [regex]; | |
const posParams: { [key: string]: UrlSegment } = {}; | |
const consumed: UrlSegment[] = []; | |
let currentIndex = 0; | |
for (let i = 0; i < parts.length; ++i) { | |
if (currentIndex >= segments.length) { | |
return null; | |
} | |
const current = segments[currentIndex]; | |
const part = parts[i]; | |
if (!part.test(current.path)) { | |
return null; | |
} | |
posParams[paramName] = current; | |
consumed.push(current); | |
currentIndex++; | |
} | |
if (route.pathMatch === 'full' && | |
(segmentGroup.hasChildren() || currentIndex < segments.length)) { | |
return null; | |
} | |
return { consumed, posParams }; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright (c) Matan Shukry | |
* All rights reserved. | |
*/ | |
export const UserRoutes: Routes = [ | |
{ | |
path: 'users', | |
component: UserComponent, | |
children: [ | |
{ | |
path: '', | |
component: UserListComponent | |
}, | |
{ | |
matcher: ComplexUrlMatcher("id", /[0-9]+/), | |
component: UserItemComponent | |
}, | |
] | |
} | |
]; | |
@NgModule({ | |
imports: [RouterModule.forChild(UserRoutes)], | |
exports: [RouterModule] | |
}) | |
export class UserRoutingModule { } |
@matanshukry i am also facing same issue
ERROR in app/app-routing.module.ts(120,49): Error during template compile of 'AppRoutingModule' Expression form not supported.
when i am making production build . i am using angular 5
For mine use case where a matcher can have optionally parameter
/**
* Generic matcher function
*
* Set in route data variable with a named regex to get parameters
* ie:
* data: {
* regex: /^(?<currency_pair>[a-z_]{3,6}-[a-z_]{3,6})?$/
* }
*/
export function matcher(segments: UrlSegment[], segmentGroup: UrlSegmentGroup, route: Route): UrlMatchResult {
const regex = route.data.regex;
const url = segments.length == 1 ? segments[0].toString() : '';
let params = url.match(regex);
if (params) {
const posParams: { [key: string]: UrlSegment } = {};
// Named parameter based in name group of regexp
for (const [name, value] of Object.entries(params.groups)) {
posParams[name] = new UrlSegment(value, {});;
}
return { consumed: segments, posParams };
}
return null;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@matanshukry i also facing same issue.how can i solve it?