feat(router): update RouterLink to support query params and fragment
This commit is contained in:
parent
b0e7c14545
commit
33b518ad21
|
@ -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,25 +51,36 @@ 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();
|
||||
}
|
||||
|
||||
|
||||
@HostListener("click")
|
||||
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);
|
||||
}
|
||||
|
|
|
@ -193,7 +193,7 @@ export class Router {
|
|||
navigate(commands: any[], extras: NavigationExtras = {}): Promise<boolean> {
|
||||
return this.scheduleNavigation(this.createUrlTree(commands, extras), false);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Serializes a {@link UrlTree} into a string.
|
||||
*/
|
||||
|
|
|
@ -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`,
|
||||
|
|
Loading…
Reference in New Issue