From 9d5c33f9dd66f08e372d1ec051f61f7526562515 Mon Sep 17 00:00:00 2001 From: Brian Ford Date: Sun, 3 May 2015 20:25:04 -0700 Subject: [PATCH] feat(router): sibling outlets --- modules/angular2/src/router/router_outlet.js | 9 +++-- modules/angular2/test/router/outlet_spec.js | 36 ++++++++++++++++++++ 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/modules/angular2/src/router/router_outlet.js b/modules/angular2/src/router/router_outlet.js index 1504fae9db..21c5197776 100644 --- a/modules/angular2/src/router/router_outlet.js +++ b/modules/angular2/src/router/router_outlet.js @@ -1,6 +1,8 @@ import {Promise, PromiseWrapper} from 'angular2/src/facade/async'; +import {isBlank} from 'angular2/src/facade/lang'; import {Directive} from 'angular2/src/core/annotations_impl/annotations'; +import {Attribute} from 'angular2/src/core/annotations_impl/di'; import {Compiler, ViewContainerRef} from 'angular2/core'; import {Injector, bind} from 'angular2/di'; @@ -16,12 +18,15 @@ export class RouterOutlet { _router:routerMod.Router; _viewContainer:ViewContainerRef; - constructor(viewContainer:ViewContainerRef, compiler:Compiler, router:routerMod.Router, injector:Injector) { + constructor(viewContainer:ViewContainerRef, compiler:Compiler, router:routerMod.Router, injector:Injector, @Attribute('name') nameAttr) { + if (isBlank(nameAttr)) { + nameAttr = 'default'; + } this._router = router; this._viewContainer = viewContainer; this._compiler = compiler; this._injector = injector; - this._router.registerOutlet(this); + this._router.registerOutlet(this, nameAttr); } activate(instruction:Instruction) { diff --git a/modules/angular2/test/router/outlet_spec.js b/modules/angular2/test/router/outlet_spec.js index 272f64061d..6960c78770 100644 --- a/modules/angular2/test/router/outlet_spec.js +++ b/modules/angular2/test/router/outlet_spec.js @@ -99,6 +99,24 @@ export function main() { })); + it('should work with sibling routers', inject([AsyncTestCompleter], (async) => { + compile('left { } | right { }') + .then((_) => rtr.config({'path': '/ab', 'components': {'left': A, 'right': B} })) + .then((_) => rtr.config({'path': '/ba', 'components': {'left': B, 'right': A} })) + .then((_) => rtr.navigate('/ab')) + .then((_) => { + view.detectChanges(); + expect(view.rootNodes).toHaveText('left { A } | right { B }'); + }) + .then((_) => rtr.navigate('/ba')) + .then((_) => { + view.detectChanges(); + expect(view.rootNodes).toHaveText('left { B } | right { A }'); + async.done(); + }); + })); + + it('should generate link hrefs', inject([AsyncTestCompleter], (async) => { ctx.name = 'brian'; compile('{{name}}') @@ -130,6 +148,24 @@ class HelloCmp { } +@Component({ + selector: 'a-cmp' +}) +@View({ + template: "A" +}) +class A {} + + +@Component({ + selector: 'b-cmp' +}) +@View({ + template: "B" +}) +class B {} + + @Component({ selector: 'user-cmp' })