fix(router): browser back and forward buttons not working correctly.

Closes #8524

Closes #8532
This commit is contained in:
Dimitrios Loukadakis 2016-05-08 04:24:46 +03:00 committed by Misko Hevery
parent 27c25bd0e8
commit 595bcdd1ac
3 changed files with 67 additions and 24 deletions

View File

@ -9,19 +9,19 @@ import {Location} from '../index';
export class SpyLocation implements Location { export class SpyLocation implements Location {
urlChanges: string[] = []; urlChanges: string[] = [];
/** @internal */ /** @internal */
_path: string = ''; private _history: LocationState[] = [new LocationState('', '')];
/** @internal */ /** @internal */
_query: string = ''; private _historyIndex: number = 0;
/** @internal */ /** @internal */
_subject: EventEmitter<any> = new EventEmitter(); _subject: EventEmitter<any> = new EventEmitter();
/** @internal */ /** @internal */
_baseHref: string = ''; _baseHref: string = '';
setInitialPath(url: string) { this._path = url; } setInitialPath(url: string) { this._history[this._historyIndex].path = url; }
setBaseHref(url: string) { this._baseHref = url; } setBaseHref(url: string) { this._baseHref = url; }
path(): string { return this._path; } path(): string { return this._history[this._historyIndex].path; }
simulateUrlPop(pathname: string) { simulateUrlPop(pathname: string) {
ObservableWrapper.callEmit(this._subject, {'url': pathname, 'pop': true}); ObservableWrapper.callEmit(this._subject, {'url': pathname, 'pop': true});
@ -43,11 +43,17 @@ export class SpyLocation implements Location {
go(path: string, query: string = '') { go(path: string, query: string = '') {
path = this.prepareExternalUrl(path); path = this.prepareExternalUrl(path);
if (this._path == path && this._query == query) {
if (this._historyIndex > 0) {
this._history.splice(this._historyIndex + 1);
}
this._history.push(new LocationState(path, query));
this._historyIndex = this._history.length - 1;
var locationState = this._history[this._historyIndex - 1];
if(locationState.path == path && locationState.query == query) {
return; return;
} }
this._path = path;
this._query = query;
var url = path + (query.length > 0 ? ('?' + query) : ''); var url = path + (query.length > 0 ? ('?' + query) : '');
this.urlChanges.push(url); this.urlChanges.push(url);
@ -55,19 +61,26 @@ export class SpyLocation implements Location {
replaceState(path: string, query: string = '') { replaceState(path: string, query: string = '') {
path = this.prepareExternalUrl(path); path = this.prepareExternalUrl(path);
this._path = path;
this._query = query; this._history[this._historyIndex].path = path;
this._history[this._historyIndex].query = query;
var url = path + (query.length > 0 ? ('?' + query) : ''); var url = path + (query.length > 0 ? ('?' + query) : '');
this.urlChanges.push('replace: ' + url); this.urlChanges.push('replace: ' + url);
} }
forward() { forward() {
// TODO if (this._historyIndex < (this._history.length - 1)) {
this._historyIndex++;
ObservableWrapper.callEmit(this._subject, {'url': this.path(), 'pop': true})
}
} }
back() { back() {
// TODO if (this._historyIndex > 0) {
this._historyIndex--;
ObservableWrapper.callEmit(this._subject, {'url': this.path(), 'pop': true})
}
} }
subscribe(onNext: (value: any) => void, onThrow: (error: any) => void = null, subscribe(onNext: (value: any) => void, onThrow: (error: any) => void = null,
@ -79,3 +92,12 @@ export class SpyLocation implements Location {
platformStrategy: any = null; platformStrategy: any = null;
normalize(url: string): string { return null; } normalize(url: string): string { return null; }
} }
class LocationState {
path: string;
query: string;
constructor(path: string, query: string) {
this.path = path;
this.query = query;
}
}

View File

@ -148,23 +148,25 @@ export class Router {
private _setUpLocationChangeListener(): void { private _setUpLocationChangeListener(): void {
this._locationSubscription = this._location.subscribe( this._locationSubscription = this._location.subscribe(
(change) => { this._navigate(this._urlSerializer.parse(change['url'])); }); (change) => { this._navigate(this._urlSerializer.parse(change['url']), change['pop']); });
} }
private _navigate(url: UrlTree): Promise<void> { private _navigate(url: UrlTree, pop?: boolean): Promise<void> {
this._urlTree = url; this._urlTree = url;
return recognize(this._componentResolver, this._rootComponentType, url, this._routeTree) return recognize(this._componentResolver, this._rootComponentType, url, this._routeTree)
.then(currTree => { .then(currTree => {
return new _ActivateSegments(currTree, this._routeTree) return new _ActivateSegments(currTree, this._routeTree)
.activate(this._routerOutletMap, this._rootComponent) .activate(this._routerOutletMap, this._rootComponent)
.then(updated => { .then(updated => {
if (updated) { if (updated) {
this._routeTree = currTree; this._routeTree = currTree;
this._location.go(this._urlSerializer.serialize(this._urlTree)); if (isBlank(pop) || !pop) {
this._changes.emit(null); this._location.go(this._urlSerializer.serialize(this._urlTree));
} }
}); this._changes.emit(null);
}); }
});
});
} }
} }

View File

@ -62,6 +62,25 @@ export function main() {
expect(location.path()).toEqual('/team/33/simple'); expect(location.path()).toEqual('/team/33/simple');
}))); })));
it('should navigate back and forward',
fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => {
let fixture = tcb.createFakeAsync(RootCmp);
router.navigateByUrl('/team/33/simple');
advance(fixture);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
location.back();
advance(fixture);
expect(location.path()).toEqual('/team/33/simple');
location.forward();
advance(fixture);
expect(location.path()).toEqual('/team/22/user/victor');
})));
it('should navigate when locations changes', it('should navigate when locations changes',
fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => { fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => {
let fixture = tcb.createFakeAsync(RootCmp); let fixture = tcb.createFakeAsync(RootCmp);