feat(router): introduce ParamMap to access parameters

The Router use the type `Params` for all of:
- position parameters,
- matrix parameters,
- query parameters.

`Params` is defined as follow `type Params = {[key: string]: any}`

Because parameters can either have single or multiple values, the type should
actually be `type Params = {[key: string]: string | string[]}`.

The client code often assumes that parameters have single values, as in the
following exemple:

```
class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.sessionId = this.route
      .queryParams
      .map(params => params['session_id'] || 'None');
}
}

```

The problem here is that `params['session_id']` could be `string` or `string[]`
but the error is not caught at build time because of the `any` type.

Fixing the type as describe above would break the build because `sessionId`
would becomes an `Observable<string | string[]>`.

However the client code knows if it expects a single or multiple values. By
using the new `ParamMap` interface the user code can decide when it needs a
single value (calling `ParamMap.get(): string`) or multiple values (calling
`ParamMap.getAll(): string[]`).

The above exemple should be rewritten as:

```
class MyComponent {
sessionId: Observable<string>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.sessionId = this.route
      .queryParamMap
      .map(paramMap => paramMap.get('session_id') || 'None');
}
}

```

Added APIs:
- `interface ParamMap`,
- `ActivatedRoute.paramMap: ParamMap`,
- `ActivatedRoute.queryParamMap: ParamMap`,
- `ActivatedRouteSnapshot.paramMap: ParamMap`,
- `ActivatedRouteSnapshot.queryParamMap: ParamMap`,
- `UrlSegment.parameterMap: ParamMap`
This commit is contained in:
Victor Berchet
2017-03-17 10:09:42 -07:00
parent a9d5de0e56
commit a755b715ed
12 changed files with 200 additions and 15 deletions

View File

@ -6,9 +6,11 @@ export declare class ActivatedRoute {
readonly firstChild: ActivatedRoute;
fragment: Observable<string>;
outlet: string;
readonly paramMap: Observable<ParamMap>;
params: Observable<Params>;
readonly parent: ActivatedRoute;
readonly pathFromRoot: ActivatedRoute[];
readonly queryParamMap: Observable<ParamMap>;
queryParams: Observable<Params>;
readonly root: ActivatedRoute;
readonly routeConfig: Route;
@ -25,9 +27,11 @@ export declare class ActivatedRouteSnapshot {
readonly firstChild: ActivatedRouteSnapshot;
fragment: string;
outlet: string;
readonly paramMap: ParamMap;
params: Params;
readonly parent: ActivatedRouteSnapshot;
readonly pathFromRoot: ActivatedRouteSnapshot[];
readonly queryParamMap: ParamMap;
queryParams: Params;
readonly root: ActivatedRouteSnapshot;
readonly routeConfig: Route;
@ -150,6 +154,13 @@ export declare class NoPreloading implements PreloadingStrategy {
preload(route: Route, fn: () => Observable<any>): Observable<any>;
}
/** @stable */
export interface ParamMap {
get(name: string): string | null;
getAll(name: string): string[];
has(name: string): boolean;
}
/** @stable */
export declare type Params = {
[key: string]: any;
@ -390,6 +401,7 @@ export declare abstract class UrlHandlingStrategy {
/** @stable */
export declare class UrlSegment {
readonly parameterMap: ParamMap;
parameters: {
[name: string]: string;
};
@ -428,6 +440,7 @@ export declare abstract class UrlSerializer {
/** @stable */
export declare class UrlTree {
fragment: string;
readonly queryParamMap: ParamMap;
queryParams: {
[key: string]: string;
};