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

@ -163,6 +163,8 @@ describe('url serializer', () => {
it('should handle multiple query params of the same name into an array', () => {
const tree = url.parse('/one?a=foo&a=bar&a=swaz');
expect(tree.queryParams).toEqual({a: ['foo', 'bar', 'swaz']});
expect(tree.queryParamMap.get('a')).toEqual('foo');
expect(tree.queryParamMap.getAll('a')).toEqual(['foo', 'bar', 'swaz']);
expect(url.serialize(tree)).toEqual('/one?a=foo&a=bar&a=swaz');
});
@ -199,8 +201,11 @@ describe('url serializer', () => {
it('should encode/decode "slash" in path segments and parameters', () => {
const u = `/${encode("one/two")};${encode("p/1")}=${encode("v/1")}/three`;
const tree = url.parse(u);
expect(tree.root.children[PRIMARY_OUTLET].segments[0].path).toEqual('one/two');
expect(tree.root.children[PRIMARY_OUTLET].segments[0].parameters).toEqual({['p/1']: 'v/1'});
const segment = tree.root.children[PRIMARY_OUTLET].segments[0];
expect(segment.path).toEqual('one/two');
expect(segment.parameters).toEqual({'p/1': 'v/1'});
expect(segment.parameterMap.get('p/1')).toEqual('v/1');
expect(segment.parameterMap.getAll('p/1')).toEqual(['v/1']);
expect(url.serialize(tree)).toEqual(u);
});
@ -208,7 +213,9 @@ describe('url serializer', () => {
const u = `/one?${encode("p 1")}=${encode("v 1")}&${encode("p 2")}=${encode("v 2")}`;
const tree = url.parse(u);
expect(tree.queryParams).toEqual({['p 1']: 'v 1', ['p 2']: 'v 2'});
expect(tree.queryParams).toEqual({'p 1': 'v 1', 'p 2': 'v 2'});
expect(tree.queryParamMap.get('p 1')).toEqual('v 1');
expect(tree.queryParamMap.get('p 2')).toEqual('v 2');
expect(url.serialize(tree)).toEqual(u);
});