From 0ebe283b370ead8f483b89bf0e0d6b8288c3d752 Mon Sep 17 00:00:00 2001 From: Brian Ford Date: Fri, 30 Oct 2015 17:05:30 -0700 Subject: [PATCH] feat(router): provide RouteConfig object for AuxRoute Closes #4319 --- .../angular2/src/router/route_config_impl.ts | 16 +++++++------- .../src/router/route_config_nomalizer.ts | 3 +++ .../angular2/src/router/route_definition.ts | 5 +++-- modules/angular2/src/router/router.ts | 7 +++++-- .../angular2/test/router/route_config_spec.ts | 21 +++++++++++++++++++ 5 files changed, 41 insertions(+), 11 deletions(-) diff --git a/modules/angular2/src/router/route_config_impl.ts b/modules/angular2/src/router/route_config_impl.ts index cd6be47d8b..a9085df0c5 100644 --- a/modules/angular2/src/router/route_config_impl.ts +++ b/modules/angular2/src/router/route_config_impl.ts @@ -38,16 +38,15 @@ export class Route implements RouteDefinition { path: string; component: Type; name: string; - // added next two properties to work around https://github.com/Microsoft/TypeScript/issues/4107 - loader: Function; - redirectTo: string; + // added next three properties to work around https://github.com/Microsoft/TypeScript/issues/4107 + aux: string = null; + loader: Function = null; + redirectTo: string = null; constructor({path, component, name, data}: {path: string, component: Type, name?: string, data?: {[key: string]: any}}) { this.path = path; this.component = component; this.name = name; - this.loader = null; - this.redirectTo = null; this.data = data; } } @@ -78,7 +77,8 @@ export class AuxRoute implements RouteDefinition { path: string; component: Type; name: string; - // added next two properties to work around https://github.com/Microsoft/TypeScript/issues/4107 + // added next three properties to work around https://github.com/Microsoft/TypeScript/issues/4107 + aux: string = null; loader: Function = null; redirectTo: string = null; constructor({path, component, name}: {path: string, component: Type, name?: string}) { @@ -115,6 +115,7 @@ export class AsyncRoute implements RouteDefinition { path: string; loader: Function; name: string; + aux: string = null; constructor({path, loader, name, data}: {path: string, loader: Function, name?: string, data?: {[key: string]: any}}) { this.path = path; @@ -148,9 +149,10 @@ export class Redirect implements RouteDefinition { path: string; redirectTo: string; name: string = null; - // added next property to work around https://github.com/Microsoft/TypeScript/issues/4107 + // added next three properties to work around https://github.com/Microsoft/TypeScript/issues/4107 loader: Function = null; data: any = null; + aux: string = null; constructor({path, redirectTo}: {path: string, redirectTo: string}) { this.path = path; this.redirectTo = redirectTo; diff --git a/modules/angular2/src/router/route_config_nomalizer.ts b/modules/angular2/src/router/route_config_nomalizer.ts index 013262806d..85fc709dcd 100644 --- a/modules/angular2/src/router/route_config_nomalizer.ts +++ b/modules/angular2/src/router/route_config_nomalizer.ts @@ -26,6 +26,9 @@ export function normalizeRouteConfig(config: RouteDefinition): RouteDefinition { if (config.loader) { return new AsyncRoute({path: config.path, loader: config.loader, name: config.name}); } + if (config.aux) { + return new AuxRoute({path: config.aux, component:config.component, name: config.name}); + } if (config.component) { if (typeof config.component == 'object') { let componentDefinitionObject = config.component; diff --git a/modules/angular2/src/router/route_definition.ts b/modules/angular2/src/router/route_definition.ts index d21e2c4e56..96fa033e19 100644 --- a/modules/angular2/src/router/route_definition.ts +++ b/modules/angular2/src/router/route_definition.ts @@ -4,7 +4,7 @@ import {CONST, Type} from 'angular2/src/core/facade/lang'; * `RouteDefinition` defines a route within a {@link RouteConfig} decorator. * * Supported keys: - * - `path` (required) + * - `path` or `aux` (requires exactly one of these) * - `component`, `loader`, `redirectTo` (requires exactly one of these) * - `name` or `as` (optional) (requires exactly one of these) * - `data` (optional) @@ -12,7 +12,8 @@ import {CONST, Type} from 'angular2/src/core/facade/lang'; * See also {@link Route}, {@link AsyncRoute}, {@link AuxRoute}, and {@link Redirect}. */ export interface RouteDefinition { - path: string; + path?: string; + aux?: string; component?: Type | ComponentDefinition; loader?: Function; redirectTo?: string; diff --git a/modules/angular2/src/router/router.ts b/modules/angular2/src/router/router.ts index 5d7ec20159..b91335c2b7 100644 --- a/modules/angular2/src/router/router.ts +++ b/modules/angular2/src/router/router.ts @@ -337,8 +337,11 @@ export class Router { } var promises = []; - this._auxRouters.forEach( - (router, name) => { promises.push(router.commit(instruction.auxInstruction[name])); }); + this._auxRouters.forEach((router, name) => { + if (isPresent(instruction.auxInstruction[name])) { + promises.push(router.commit(instruction.auxInstruction[name])); + } + }); return next.then((_) => PromiseWrapper.all(promises)); } diff --git a/modules/angular2/test/router/route_config_spec.ts b/modules/angular2/test/router/route_config_spec.ts index bf64ad075a..41bc778b1c 100644 --- a/modules/angular2/test/router/route_config_spec.ts +++ b/modules/angular2/test/router/route_config_spec.ts @@ -97,6 +97,20 @@ export function main() { })); + it('should work in an app with aux routes', inject([AsyncTestCompleter], (async) => { + bootstrap(AuxAppCmp, testBindings) + .then((applicationRef) => { + var router = applicationRef.hostComponent.router; + router.subscribe((_) => { + expect(el).toHaveText('root { hello } aside { hello }'); + expect(applicationRef.hostComponent.location.path()).toEqual('/hello(aside)'); + async.done(); + }); + router.navigateByUrl('/hello(aside)'); + }); + })); + + it('should work in an app with async components defined with "loader"', inject([AsyncTestCompleter], (async) => { bootstrap(ConciseAsyncAppCmp, testBindings) @@ -227,6 +241,13 @@ class ConciseAsyncAppCmp { constructor(public router: Router, public location: LocationStrategy) {} } +@Component({selector: 'app-cmp'}) +@View({template: `root { } aside { }`, directives: ROUTER_DIRECTIVES}) +@RouteConfig([{path: '/hello', component: HelloCmp}, {aux: 'aside', component: HelloCmp}]) +class AuxAppCmp { + constructor(public router: Router, public location: LocationStrategy) {} +} + @Component({selector: 'app-cmp'}) @View({template: `root { }`, directives: ROUTER_DIRECTIVES}) @RouteConfig([