feat(router): sibling outlets

This commit is contained in:
Brian Ford 2015-05-03 20:25:04 -07:00
parent 2713b7877b
commit 9d5c33f9dd
2 changed files with 43 additions and 2 deletions

View File

@ -1,6 +1,8 @@
import {Promise, PromiseWrapper} from 'angular2/src/facade/async'; 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 {Directive} from 'angular2/src/core/annotations_impl/annotations';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Compiler, ViewContainerRef} from 'angular2/core'; import {Compiler, ViewContainerRef} from 'angular2/core';
import {Injector, bind} from 'angular2/di'; import {Injector, bind} from 'angular2/di';
@ -16,12 +18,15 @@ export class RouterOutlet {
_router:routerMod.Router; _router:routerMod.Router;
_viewContainer:ViewContainerRef; _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._router = router;
this._viewContainer = viewContainer; this._viewContainer = viewContainer;
this._compiler = compiler; this._compiler = compiler;
this._injector = injector; this._injector = injector;
this._router.registerOutlet(this); this._router.registerOutlet(this, nameAttr);
} }
activate(instruction:Instruction) { activate(instruction:Instruction) {

View File

@ -99,6 +99,24 @@ export function main() {
})); }));
it('should work with sibling routers', inject([AsyncTestCompleter], (async) => {
compile('left { <router-outlet name="left"></router-outlet> } | right { <router-outlet name="right"></router-outlet> }')
.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) => { it('should generate link hrefs', inject([AsyncTestCompleter], (async) => {
ctx.name = 'brian'; ctx.name = 'brian';
compile('<a href="hello" router-link="user" [router-params]="{name: name}">{{name}}</a>') compile('<a href="hello" router-link="user" [router-params]="{name: name}">{{name}}</a>')
@ -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({ @Component({
selector: 'user-cmp' selector: 'user-cmp'
}) })