Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(router): listen to location changes #8362

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 15 additions & 2 deletions modules/angular2/src/alt_router/router.ts
Expand Up @@ -2,7 +2,12 @@ import {OnInit, provide, ReflectiveInjector, ComponentResolver} from 'angular2/c
import {RouterOutlet} from './directives/router_outlet';
import {Type, isBlank, isPresent} from 'angular2/src/facade/lang';
import {ListWrapper} from 'angular2/src/facade/collection';
import {EventEmitter, Observable, PromiseWrapper} from 'angular2/src/facade/async';
import {
EventEmitter,
Observable,
PromiseWrapper,
ObservableWrapper
} from 'angular2/src/facade/async';
import {StringMapWrapper} from 'angular2/src/facade/collection';
import {BaseException} from 'angular2/src/facade/exceptions';
import {RouterUrlSerializer} from './router_url_serializer';
Expand Down Expand Up @@ -33,13 +38,14 @@ export class RouterOutletMap {
export class Router {
private _prevTree: Tree<RouteSegment>;
private _urlTree: Tree<UrlSegment>;

private _locationSubscription: any;
private _changes: EventEmitter<void> = new EventEmitter<void>();

constructor(private _rootComponent: Object, private _rootComponentType: Type,
private _componentResolver: ComponentResolver,
private _urlSerializer: RouterUrlSerializer,
private _routerOutletMap: RouterOutletMap, private _location: Location) {
this._setUpLocationChangeListener();
this.navigateByUrl(this._location.path());
}

Expand All @@ -53,6 +59,13 @@ export class Router {
return this._navigate(this.createUrlTree(changes, segment));
}

dispose(): void { ObservableWrapper.dispose(this._locationSubscription); }

private _setUpLocationChangeListener(): void {
this._locationSubscription = this._location.subscribe(
(change) => { this._navigate(this._urlSerializer.parse(change['url'])); });
}

private _navigate(url: Tree<UrlSegment>): Promise<void> {
this._urlTree = url;
return recognize(this._componentResolver, this._rootComponentType, url)
Expand Down
6 changes: 4 additions & 2 deletions modules/angular2/src/alt_router/router_providers_common.ts
Expand Up @@ -24,6 +24,8 @@ function routerFactory(app: ApplicationRef, componentResolver: ComponentResolver
throw new BaseException("Bootstrap at least one component before injecting Router.");
}
// TODO: vsavkin this should not be null
return new Router(null, app.componentTypes[0], componentResolver, urlSerializer, routerOutletMap,
location);
let router = new Router(null, app.componentTypes[0], componentResolver, urlSerializer,
routerOutletMap, location);
app.registerDisposeListener(() => router.dispose());
return router;
}
13 changes: 13 additions & 0 deletions modules/angular2/test/alt_router/integration_spec.ts
Expand Up @@ -64,6 +64,19 @@ export function main() {
expect(location.path()).toEqual('/team/33/simple');
})));

it('should navigate when locations changes',
fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => {
let fixture = tcb.createFakeAsync(RootCmp);

router.navigateByUrl('/team/22/user/victor');
advance(fixture);

location.simulateHashChange("/team/22/user/fedor");
advance(fixture);

expect(fixture.debugElement.nativeElement).toHaveText('team 22 { hello fedor, aux: }');
})));

it('should support nested routes',
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
Expand Down
2 changes: 1 addition & 1 deletion modules/playground/src/alt_routing/inbox-app.ts
Expand Up @@ -7,7 +7,7 @@ import {
ROUTER_PROVIDERS,
OnActivate,
RouteSegment,
Tree
Tree,
} from 'angular2/alt_router';
import * as db from './data';
import {Location} from 'angular2/platform/common';
Expand Down