feat(router): update RouterLink to support query params and fragment

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

@@ -2,7 +2,8 @@ import {
   Directive,
   HostListener,
   HostBinding,
-  Input
+  Input,
+  OnChanges
 } from '@angular/core';
 import {Router} from '../router';
 import {ActivatedRoute} from '../router_state';
@@ -33,9 +34,11 @@ import {ActivatedRoute} from '../router_state';
  * And if the segment begins with `../`, the router will go up one level.
  */
 @Directive({selector: '[routerLink]'})
-export class RouterLink {
+export class RouterLink implements OnChanges {
   @Input() target: string;
   private commands: any[] = [];
+  @Input() queryParams: {[k:string]:any};
+  @Input() fragment: string;
 
   // the url displayed on the anchor element.
   @HostBinding() href: string;
@@ -48,10 +51,13 @@ export class RouterLink {
   @Input()
   set routerLink(data: any[] | string) {
     if (Array.isArray(data)) {
-      this.commands = data;
+      this.commands = <any>data;
     } else {
       this.commands = [data];
     }
+  }
+
+  ngOnChanges(changes:{}):any {
     this.updateTargetUrlAndHref();
   }
 
@@ -59,14 +65,22 @@ export class RouterLink {
   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});
+      this.router.navigate(this.commands, {
+        relativeTo: this.route,
+        queryParameters: this.queryParams,
+        fragment: this.fragment
+      });
       return false;
     }
     return true;
   }
 
   private updateTargetUrlAndHref(): void {
-    const tree = this.router.createUrlTree(this.commands, {relativeTo: this.route});
+    const tree = this.router.createUrlTree(this.commands, {
+      relativeTo: this.route,
+      queryParameters: this.queryParams,
+      fragment: this.fragment
+    });
     if (tree) {
       this.href = this.router.serializeUrl(tree);
     }

modules/@angular/router/test/router.spec.ts

@@ -36,8 +36,11 @@ describe("Integration", () => {
       {provide: Location, useClass: SpyLocation},
       {
         provide: Router,
-        useFactory: (resolver, urlSerializer, outletMap, location, injector) =>
-          new Router(RootCmp, resolver, urlSerializer, outletMap, location, injector, config),
+        useFactory: (resolver, urlSerializer, outletMap, location, injector) => {
+          const r = new Router(RootCmp, resolver, urlSerializer, outletMap, location, injector, config);
+          r.initialNavigation();
+          return r;
+        },
         deps: [ComponentResolver, UrlSerializer, RouterOutletMap, Location, Injector]
       },
       {provide: ActivatedRoute, useFactory: (r) => r.routerState.root, deps: [Router]},
@@ -389,6 +392,32 @@ describe("Integration", () => {
         advance(fixture);
         expect(fixture.debugElement.nativeElement).toHaveText('link');
       })));
+
+    it("should support query params and fragments",
+      fakeAsync(inject([Router, Location, TestComponentBuilder], (router, location, tcb) => {
+        router.resetConfig([
+          { path: 'team/:id', component: TeamCmp, children: [
+            { path: 'link', component: LinkWithQueryParamsAndFragment },
+            { path: 'simple', component: SimpleCmp }
+          ] }
+        ]);
+
+        const fixture = tcb.createFakeAsync(RootCmp);
+        advance(fixture);
+
+        router.navigateByUrl('/team/22/link');
+        advance(fixture);
+
+        const native = fixture.debugElement.nativeElement.querySelector("a");
+        expect(native.getAttribute("href")).toEqual("/team/22/simple?q=1#f");
+        native.click();
+        advance(fixture);
+
+        expect(fixture.debugElement.nativeElement)
+          .toHaveText('team 22 { simple, right:  }');
+
+        expect(location.path()).toEqual('/team/22/simple?q=1#f');
+      })));
   });
 
   describe("guards", () => {
@@ -603,6 +632,13 @@ class AbsoluteLinkCmp {}
 })
 class RelativeLinkCmp {}
 
+@Component({
+  selector: 'link-cmp',
+  template: `<a [routerLink]="['../simple']" [queryParams]="{q: '1'}" fragment="f">link</a>`,
+  directives: ROUTER_DIRECTIVES
+})
+class LinkWithQueryParamsAndFragment {}
+
 @Component({
   selector: 'simple-cmp',
   template: `simple`,