feat(router): support navigating by url tree

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);
     }
   }
 }

modules/@angular/router/src/router.ts

@@ -135,25 +135,6 @@ export class Router {
    */
   get events(): Observable<Event> { 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<boolean> {
-    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<boolean> {
+    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.