fix(router): handle router outlets in ngIf

This commit is contained in:
vsavkin
2016-06-30 18:24:43 -07:00
parent f65ebec3ed
commit 0c65d5cf2b
5 changed files with 64 additions and 16 deletions

View File

@ -123,6 +123,7 @@ export class Router {
private routerEvents: Subject<Event>;
private navigationId: number = 0;
private config: RouterConfig;
private futureUrlTree: UrlTree;
/**
* Creates the router service.
@ -134,6 +135,7 @@ export class Router {
this.resetConfig(config);
this.routerEvents = new Subject<Event>();
this.currentUrlTree = createEmptyUrlTree();
this.futureUrlTree = this.currentUrlTree;
this.currentRouterState = createEmptyState(this.currentUrlTree, this.rootComponentType);
}
@ -221,6 +223,18 @@ export class Router {
return createUrlTree(a, this.currentUrlTree, commands, queryParams, fragment);
}
/**
* Used by RouterLinkWithHref to update HREFs.
* We have to use the futureUrl because we run change detection ind the middle of activation when
* the current url has not been updated yet.
* @internal
*/
createUrlTreeUsingFutureUrl(
commands: any[], {relativeTo, queryParams, fragment}: NavigationExtras = {}): UrlTree {
const a = relativeTo ? relativeTo : this.routerState.root;
return createUrlTree(a, this.futureUrlTree, commands, queryParams, fragment);
}
/**
* Navigate based on the provided url. This navigation is always absolute.
*
@ -293,20 +307,21 @@ export class Router {
}
return new Promise((resolvePromise, rejectPromise) => {
let updatedUrl: UrlTree;
let state: RouterState;
let navigationIsSuccessful: boolean;
let preActivation: PreActivation;
applyRedirects(url, this.config)
.mergeMap(u => {
updatedUrl = u;
this.futureUrlTree = u;
return recognize(
this.rootComponentType, this.config, updatedUrl, this.serializeUrl(updatedUrl));
this.rootComponentType, this.config, this.futureUrlTree,
this.serializeUrl(this.futureUrlTree));
})
.mergeMap((newRouterStateSnapshot) => {
this.routerEvents.next(new RoutesRecognized(
id, this.serializeUrl(url), this.serializeUrl(updatedUrl), newRouterStateSnapshot));
id, this.serializeUrl(url), this.serializeUrl(this.futureUrlTree),
newRouterStateSnapshot));
return resolve(this.resolver, newRouterStateSnapshot);
})
@ -341,10 +356,10 @@ export class Router {
new ActivateRoutes(state, this.currentRouterState).activate(this.outletMap);
this.currentUrlTree = updatedUrl;
this.currentUrlTree = this.futureUrlTree;
this.currentRouterState = state;
if (!preventPushState) {
let path = this.urlSerializer.serialize(updatedUrl);
let path = this.urlSerializer.serialize(this.futureUrlTree);
if (this.location.isCurrentPathEqualTo(path)) {
this.location.replaceState(path);
} else {
@ -355,8 +370,8 @@ export class Router {
})
.then(
() => {
this.routerEvents.next(
new NavigationEnd(id, this.serializeUrl(url), this.serializeUrl(updatedUrl)));
this.routerEvents.next(new NavigationEnd(
id, this.serializeUrl(url), this.serializeUrl(this.futureUrlTree)));
resolvePromise(navigationIsSuccessful);
},
e => {