diff --git a/modules/@angular/router/src/directives/router_link.ts b/modules/@angular/router/src/directives/router_link.ts index 5c86187314..b087a4f2ae 100644 --- a/modules/@angular/router/src/directives/router_link.ts +++ b/modules/@angular/router/src/directives/router_link.ts @@ -1,6 +1,7 @@ import {Directive, HostBinding, HostListener, Input, OnChanges} from '@angular/core'; import {Router} from '../router'; +import {UrlTree} from '../url_tree'; import {ActivatedRoute} from '../router_state'; @@ -39,6 +40,8 @@ export class RouterLink implements OnChanges { // the url displayed on the anchor element. @HostBinding() href: string; + private urlTree: UrlTree; + /** * @internal */ @@ -59,20 +62,18 @@ export class RouterLink implements OnChanges { onClick(): boolean { // If no target, or if target is _self, prevent default browser behavior if (!(typeof this.target === 'string') || this.target == '_self') { - this.router.navigate( - this.commands, - {relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment}); + this.router.navigateByUrl(this.urlTree); return false; } return true; } private updateTargetUrlAndHref(): void { - const tree = this.router.createUrlTree( + this.urlTree = this.router.createUrlTree( this.commands, {relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment}); - if (tree) { - this.href = this.router.serializeUrl(tree); + if (this.urlTree) { + this.href = this.router.serializeUrl(this.urlTree); } } } diff --git a/modules/@angular/router/src/router.ts b/modules/@angular/router/src/router.ts index fb2ee6f640..e8e528eddf 100644 --- a/modules/@angular/router/src/router.ts +++ b/modules/@angular/router/src/router.ts @@ -135,25 +135,6 @@ export class Router { */ get events(): Observable { return this.routerEvents; } - /** - * Navigate based on the provided url. This navigation is always absolute. - * - * Returns a promise that: - * - is resolved with 'true' when navigation succeeds - * - is resolved with 'false' when navigation fails - * - is rejected when an error happens - * - * ### Usage - * - * ``` - * router.navigateByUrl("/team/33/user/11"); - * ``` - */ - navigateByUrl(url: string): Promise { - const urlTree = this.urlSerializer.parse(url); - return this.scheduleNavigation(urlTree, false); - } - /** * Resets the configuration used for navigation and generating links. * @@ -212,6 +193,29 @@ export class Router { return createUrlTree(a, this.currentUrlTree, commands, queryParams, fragment); } + /** + * Navigate based on the provided url. This navigation is always absolute. + * + * Returns a promise that: + * - is resolved with 'true' when navigation succeeds + * - is resolved with 'false' when navigation fails + * - is rejected when an error happens + * + * ### Usage + * + * ``` + * router.navigateByUrl("/team/33/user/11"); + * ``` + */ + navigateByUrl(url: string|UrlTree): Promise { + if (url instanceof UrlTree) { + return this.scheduleNavigation(url, false); + } else { + const urlTree = this.urlSerializer.parse(url); + return this.scheduleNavigation(urlTree, false); + } + } + /** * Navigate based on the provided array of commands and a starting point. * If no starting route is provided, the navigation is absolute.