diff --git a/modules/@angular/router/src/recognize.ts b/modules/@angular/router/src/recognize.ts index cf81b391e1..5e7b8da6f6 100644 --- a/modules/@angular/router/src/recognize.ts +++ b/modules/@angular/router/src/recognize.ts @@ -1,80 +1,66 @@ import { UrlTree, UrlSegment } from './url_tree'; import { flatten, first, merge } from './utils/collection'; -import { TreeNode, rootNode } from './utils/tree'; -import { RouterState, ActivatedRoute } from './router_state'; +import { TreeNode } from './utils/tree'; +import { RouterStateCandidate, ActivatedRouteCandidate } from './router_state'; import { Params, PRIMARY_OUTLET } from './shared'; import { RouterConfig, Route } from './config'; import { Type } from '@angular/core'; import { Observable } from 'rxjs/Observable'; -import { BehaviorSubject } from 'rxjs/BehaviorSubject'; -export function recognize(config: RouterConfig, url: UrlTree, existingState: RouterState): Observable { +export function recognize(rootComponentType: Type, config: RouterConfig, url: UrlTree): Observable { try { - const match = new MatchResult(existingState.root.component, config, [url.root], {}, rootNode(url).children, [], PRIMARY_OUTLET); - (existingState.queryParams).next(url.queryParameters); - (existingState.fragment).next(url.fragment); - const roots = constructActivatedRoute(match, rootNode(existingState)); - const res = new RouterState(roots[0], existingState.queryParams, existingState.fragment); - return new Observable(obs => { + const match = new MatchResult(rootComponentType, config, [url.root], {}, url._root.children, [], PRIMARY_OUTLET, null); + const roots = constructActivatedRoute(match); + const res = new RouterStateCandidate(roots[0], url.queryParameters, url.fragment); + return new Observable(obs => { obs.next(res); obs.complete(); }); } catch(e) { - return new Observable(obs => obs.error(e)); + return new Observable(obs => obs.error(e)); } } -function constructActivatedRoute(match: MatchResult, existingRoute: TreeNode | null): TreeNode[] { - const activatedRoute = createOrReuseRoute(match, existingRoute); - const existingChildren = existingRoute ? existingRoute.children : []; - +function constructActivatedRoute(match: MatchResult): TreeNode[] { + const activatedRoute = createActivatedRouteCandidate(match); if (match.leftOverUrl.length > 0) { - const children = recognizeMany(match.children, match.leftOverUrl, existingChildren); + const children = recognizeMany(match.children, match.leftOverUrl); checkOutletNameUniqueness(children); - return [new TreeNode(activatedRoute, children)]; + children.sort((a, b) => { + if (a.value.outlet === PRIMARY_OUTLET) return -1; + if (b.value.outlet === PRIMARY_OUTLET) return 1; + return a.value.outlet.localeCompare(b.value.outlet) + }); + return [new TreeNode(activatedRoute, children)]; } else { - return [new TreeNode(activatedRoute, [])]; + return [new TreeNode(activatedRoute, [])]; } } -function recognizeMany(config: Route[], urls: TreeNode[], - existingRoutes: TreeNode[]): TreeNode[] { - return flatten(urls.map(url => recognizeOne(config, url, existingRoutes))); +function recognizeMany(config: Route[], urls: TreeNode[]): TreeNode[] { + return flatten(urls.map(url => recognizeOne(config, url))); } -function createOrReuseRoute(match: MatchResult, existing: TreeNode | null): ActivatedRoute { - if (existing) { - const v = existing.value; - if (v.component === match.component && v.outlet === match.outlet) { - ((v.params)).next(match.parameters); - ((v.urlSegments)).next(match.consumedUrlSegments); - return v; - } - } - return new ActivatedRoute(new BehaviorSubject(match.consumedUrlSegments), new BehaviorSubject(match.parameters), match.outlet, match.component); +function createActivatedRouteCandidate(match: MatchResult): ActivatedRouteCandidate { + return new ActivatedRouteCandidate(match.consumedUrlSegments, match.parameters, match.outlet, match.component, match.route); } -function recognizeOne(config: Route[], url: TreeNode, - existingRoutes: TreeNode[]): TreeNode[] { - let m = match(config, url); - - const routesWithRightOutlet = existingRoutes.filter(r => r.value.outlet == m.outlet); - const routeWithRightOutlet = routesWithRightOutlet.length > 0 ? routesWithRightOutlet[0] : null; - - const primary = constructActivatedRoute(m, routeWithRightOutlet); - const secondary = recognizeMany(config, m.secondary, existingRoutes); +function recognizeOne(config: Route[], url: TreeNode): TreeNode[] { + const m = match(config, url); + const primary = constructActivatedRoute(m); + const secondary = recognizeMany(config, m.secondary); const res = primary.concat(secondary); checkOutletNameUniqueness(res); return res; } -function checkOutletNameUniqueness(nodes: TreeNode[]): TreeNode[] { +function checkOutletNameUniqueness(nodes: TreeNode[]): TreeNode[] { let names = {}; nodes.forEach(n => { let routeWithSameOutletName = names[n.value.outlet]; if (routeWithSameOutletName) { - const p = (routeWithSameOutletName.urlSegments).value.map(s => s.toString()).join("/"); - const c = (n.value.urlSegments).value.map(s => s.toString()).join("/"); + const p = routeWithSameOutletName.urlSegments.map(s => s.toString()).join("/"); + const c = n.value.urlSegments.map(s => s.toString()).join("/"); throw new Error(`Two segments cannot have the same outlet name: '${p}' and '${c}'.`); } names[n.value.outlet] = n.value; @@ -110,7 +96,7 @@ function matchIndex(config: Route[], url: TreeNode): MatchResult | n if (r.index) { const outlet = r.outlet ? r.outlet : PRIMARY_OUTLET; const children = r.children ? r.children : []; - return new MatchResult(r.component, children, [], {}, [url], [], outlet); + return new MatchResult(r.component, children, [], {}, [url], [], outlet, r); } } return null; @@ -129,7 +115,7 @@ function matchWithParts(route: Route, url: TreeNode): MatchResult | u = first(u.children); } const last = consumedUrl[consumedUrl.length - 1]; - return new MatchResult(route.component, [], consumedUrl, last.parameters, [], [], PRIMARY_OUTLET); + return new MatchResult(route.component, [], consumedUrl, last.parameters, [], [], PRIMARY_OUTLET, route); } const parts = path.split("/"); @@ -174,7 +160,7 @@ function matchWithParts(route: Route, url: TreeNode): MatchResult | const outlet = route.outlet ? route.outlet : PRIMARY_OUTLET; return new MatchResult(route.component, children, consumedUrlSegments, parameters, lastSegment.children, - secondarySubtrees, outlet); + secondarySubtrees, outlet, route); } class MatchResult { @@ -184,6 +170,7 @@ class MatchResult { public parameters: {[key: string]: string}, public leftOverUrl: TreeNode[], public secondary: TreeNode[], - public outlet: string + public outlet: string, + public route: Route ) {} } \ No newline at end of file diff --git a/modules/@angular/router/test/recognize.spec.ts b/modules/@angular/router/test/recognize.spec.ts index f08aad063f..82eda842ec 100644 --- a/modules/@angular/router/test/recognize.spec.ts +++ b/modules/@angular/router/test/recognize.spec.ts @@ -1,18 +1,16 @@ import {DefaultUrlSerializer} from '../src/url_serializer'; import {UrlTree} from '../src/url_tree'; import {Params, PRIMARY_OUTLET} from '../src/shared'; -import {createEmptyState, ActivatedRoute} from '../src/router_state'; +import {ActivatedRouteCandidate} from '../src/router_state'; import {recognize} from '../src/recognize'; describe('recognize', () => { - const empty = () => createEmptyState(RootComponent); - it('should work', (done) => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA } - ], tree("a"), empty()).forEach(s => { + ], tree("a")).forEach(s => { checkActivatedRoute(s.root, "", {}, RootComponent); checkActivatedRoute(s.firstChild(s.root), "a", {}, ComponentA); done(); @@ -20,40 +18,25 @@ describe('recognize', () => { }); it('should handle position args', () => { - recognize([ + recognize(RootComponent, [ { path: 'a/:id', component: ComponentA, children: [ { path: 'b/:id', component: ComponentB} ] } - ], tree("a/paramA/b/paramB"), empty()).forEach(s => { + ], tree("a/paramA/b/paramB")).forEach(s => { checkActivatedRoute(s.root, "", {}, RootComponent); checkActivatedRoute(s.firstChild(s.root), "a/paramA", {id: 'paramA'}, ComponentA); checkActivatedRoute(s.firstChild(s.firstChild(s.root)), "b/paramB", {id: 'paramB'}, ComponentB); }); }); - it('should reuse activated routes', () => { - const config = [{path: 'a/:id', component: ComponentA}]; - recognize(config, tree("a/paramA"), empty()).forEach(s => { - const n1 = s.firstChild(s.root); - const recorded = []; - n1!.params.forEach(r => recorded.push(r)); - - recognize(config, tree("a/paramB"), s).forEach(s2 => { - const n2 = s2.firstChild(s2.root); - expect(n1).toBe(n2); - expect(recorded).toEqual([{id: 'paramA'}, {id: 'paramB'}]); - }); - }); - }); - it('should support secondary routes', () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA }, { path: 'b', component: ComponentB, outlet: 'left' }, { path: 'c', component: ComponentC, outlet: 'right' } - ], tree("a(left:b//right:c)"), empty()).forEach(s => { + ], tree("a(left:b//right:c)")).forEach(s => { const c = s.children(s.root); checkActivatedRoute(c[0], "a", {}, ComponentA); checkActivatedRoute(c[1], "b", {}, ComponentB, 'left'); @@ -62,11 +45,11 @@ describe('recognize', () => { }); it('should use outlet name when matching secondary routes', () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA }, { path: 'b', component: ComponentB, outlet: 'left' }, { path: 'b', component: ComponentC, outlet: 'right' } - ], tree("a(right:b)"), empty()).forEach(s => { + ], tree("a(right:b)")).forEach(s => { const c = s.children(s.root); checkActivatedRoute(c[0], "a", {}, ComponentA); checkActivatedRoute(c[1], "b", {}, ComponentC, 'right'); @@ -74,11 +57,11 @@ describe('recognize', () => { }); it('should handle nested secondary routes', () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA }, { path: 'b', component: ComponentB, outlet: 'left' }, { path: 'c', component: ComponentC, outlet: 'right' } - ], tree("a(left:b(right:c))"), empty()).forEach(s => { + ], tree("a(left:b(right:c))")).forEach(s => { const c = s.children(s.root); checkActivatedRoute(c[0], "a", {}, ComponentA); checkActivatedRoute(c[1], "b", {}, ComponentB, 'left'); @@ -87,27 +70,40 @@ describe('recognize', () => { }); it('should handle non top-level secondary routes', () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA, children: [ { path: 'b', component: ComponentB }, { path: 'c', component: ComponentC, outlet: 'left' } ] }, - ], tree("a/b(left:c))"), empty()).forEach(s => { + ], tree("a/b(left:c))")).forEach(s => { const c = s.children(s.firstChild(s.root)); checkActivatedRoute(c[0], "b", {}, ComponentB, PRIMARY_OUTLET); checkActivatedRoute(c[1], "c", {}, ComponentC, 'left'); }); }); + it('should sort routes by outlet name', () => { + recognize(RootComponent, [ + { path: 'a', component: ComponentA }, + { path: 'c', component: ComponentC, outlet: 'c' }, + { path: 'b', component: ComponentB, outlet: 'b' } + ], tree("a(c:c//b:b)")).forEach(s => { + const c = s.children(s.root); + checkActivatedRoute(c[0], "a", {}, ComponentA); + checkActivatedRoute(c[1], "b", {}, ComponentB, 'b'); + checkActivatedRoute(c[2], "c", {}, ComponentC, 'c'); + }); + }); + it('should support matrix parameters', () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA, children: [ { path: 'b', component: ComponentB }, { path: 'c', component: ComponentC, outlet: 'left' } ] } - ], tree("a;a1=11;a2=22/b;b1=111;b2=222(left:c;c1=1111;c2=2222)"), empty()).forEach(s => { + ], tree("a;a1=11;a2=22/b;b1=111;b2=222(left:c;c1=1111;c2=2222)")).forEach(s => { checkActivatedRoute(s.firstChild(s.root), "a", {a1: '11', a2: '22'}, ComponentA); const c = s.children(s.firstChild(s.root)); checkActivatedRoute(c[0], "b", {b1: '111', b2: '222'}, ComponentB); @@ -117,15 +113,15 @@ describe('recognize', () => { describe("index", () => { it("should support index routes", () => { - recognize([ + recognize(RootComponent, [ {index: true, component: ComponentA} - ], tree(""), empty()).forEach(s => { + ], tree("")).forEach(s => { checkActivatedRoute(s.firstChild(s.root), "a", {}, ComponentA); }); }); it("should support index routes with children", () => { - recognize([ + recognize(RootComponent, [ { index: true, component: ComponentA, children: [ { index: true, component: ComponentB, children: [ @@ -134,7 +130,7 @@ describe('recognize', () => { } ] } - ], tree("c/10"), empty()).forEach(s => { + ], tree("c/10")).forEach(s => { checkActivatedRoute(s.firstChild(s.root), "", {}, ComponentA); checkActivatedRoute(s.firstChild(s.firstChild(s.root)), "", {}, ComponentB); checkActivatedRoute( @@ -145,9 +141,9 @@ describe('recognize', () => { describe("wildcards", () => { it("should support simple wildcards", () => { - recognize([ + recognize(RootComponent, [ {path: '**', component: ComponentA} - ], tree("a/b/c/d;a1=11"), empty()).forEach(s => { + ], tree("a/b/c/d;a1=11")).forEach(s => { checkActivatedRoute(s.firstChild(s.root), "a/b/c/d", {a1:'11'}, ComponentA); }); }); @@ -156,16 +152,8 @@ describe('recognize', () => { describe("query parameters", () => { it("should support query params", () => { const config = [{path: 'a', component: ComponentA}]; - recognize(config, tree("a?q=11"), empty()).forEach(s => { - const q1 = s.queryParams; - const recorded = []; - q1!.forEach(r => recorded.push(r)); - - recognize(config, tree("a?q=22"), s).forEach(s2 => { - const q2 = s2.queryParams; - expect(q1).toBe(q2); - expect(recorded).toEqual([{q: '11'}, {q: '22'}]); - }); + recognize(RootComponent, config, tree("a?q=11")).forEach(s => { + expect(s.queryParams).toEqual({q: '11'}); }); }); }); @@ -173,62 +161,48 @@ describe('recognize', () => { describe("fragment", () => { it("should support fragment", () => { const config = [{path: 'a', component: ComponentA}]; - recognize(config, tree("a#f1"), empty()).forEach(s => { - const f1 = s.fragment; - const recorded = []; - f1!.forEach(r => recorded.push(r)); - - recognize(config, tree("a#f2"), s).forEach(s2 => { - const f2 = s2.fragment; - expect(f1).toBe(f2); - expect(recorded).toEqual(["f1", "f2"]); - }); + recognize(RootComponent, config, tree("a#f1")).forEach(s => { + expect(s.fragment).toEqual("f1"); }); }); }); describe("error handling", () => { it('should error when two routes with the same outlet name got matched', () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA }, { path: 'b', component: ComponentB, outlet: 'aux' }, { path: 'c', component: ComponentC, outlet: 'aux' } - ], tree("a(aux:b//aux:c)"), empty()).subscribe(null, s => { + ], tree("a(aux:b//aux:c)")).subscribe(null, s => { expect(s.toString()).toContain("Two segments cannot have the same outlet name: 'aux:b' and 'aux:c'."); }); }); it("should error when no matching routes", () => { - recognize([ + recognize(RootComponent, [ { path: 'a', component: ComponentA } - ], tree("invalid"), empty()).subscribe(null, s => { + ], tree("invalid")).subscribe(null, s => { expect(s.toString()).toContain("Cannot match any routes"); }); }); it("should error when no matching routes (too short)", () => { - recognize([ + recognize(RootComponent, [ { path: 'a/:id', component: ComponentA } - ], tree("a"), empty()).subscribe(null, s => { + ], tree("a")).subscribe(null, s => { expect(s.toString()).toContain("Cannot match any routes"); }); }); }); }); -function checkActivatedRoute(actual: ActivatedRoute | null, url: string, params: Params, cmp: Function, outlet: string = PRIMARY_OUTLET):void { +function checkActivatedRoute(actual: ActivatedRouteCandidate | null, url: string, params: Params, cmp: Function, outlet: string = PRIMARY_OUTLET):void { if (actual === null) { expect(actual).toBeDefined(); } else { - let actualUrl; - actual.urlSegments.forEach(segments => actualUrl = segments.map(s => s.path).join("/")); - expect(actualUrl).toEqual(url); - - let actualParams; - actual.params.forEach(s => actualParams = s); - expect(actualParams).toEqual(params); + expect(actual.urlSegments.map(s => s.path).join("/")).toEqual(url); + expect(actual.params).toEqual(params); expect(actual.component).toBe(cmp); - expect(actual.outlet).toEqual(outlet); } }