Skip to content

Commit 4213a2b

Browse files
vicbvicb
committed
fix(router-outlet): getRouteId() returns the params set in setRouteId().
1 parent 8d07126 commit 4213a2b

File tree

5 files changed

+48
-18
lines changed

5 files changed

+48
-18
lines changed

‎core/src/components.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2242,7 +2242,7 @@ export namespace Components {
22422242
*/
22432243
"animated": boolean;
22442244
/**
2245-
* By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
2245+
* By default `ion-router-outlet` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
22462246
*/
22472247
"animation"?: AnimationBuilder;
22482248
"commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
@@ -5913,7 +5913,7 @@ declare namespace LocalJSX {
59135913
*/
59145914
"animated"?: boolean;
59155915
/**
5916-
* By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
5916+
* By default `ion-router-outlet` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
59175917
*/
59185918
"animation"?: AnimationBuilder;
59195919
"delegate"?: FrameworkDelegate;

‎core/src/components/router-outlet/readme.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha
3030

3131
## Properties
3232

33-
| Property | Attribute | Description | Type | Default |
34-
| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ |
35-
| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` |
36-
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
37-
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` |
33+
| Property | Attribute | Description | Type | Default |
34+
| ----------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ |
35+
| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` |
36+
| `animation` | -- | By default `ion-router-outlet` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
37+
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` |
3838

3939

4040
----------------------------------------------

‎core/src/components/router-outlet/route-outlet.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
1616

1717
private activeEl: HTMLElement | undefined;
1818
private activeComponent: any;
19+
private activeParams: any;
1920
private waitPromise?: Promise<void>;
2021
private gesture?: Gesture;
2122
private ani?: Animation;
@@ -37,7 +38,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
3738
@Prop() animated = true;
3839

3940
/**
40-
* By default `ion-nav` animates transition between pages based in the mode (ios or material design).
41+
* By default `ion-router-outlet` animates transition between pages based in the mode (ios or material design).
4142
* However, this property allows to create custom transition using `AnimateBuilder` functions.
4243
*/
4344
@Prop() animation?: AnimationBuilder;
@@ -156,6 +157,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
156157
return active ? {
157158
id: active.tagName,
158159
element: active,
160+
params: this.activeParams,
159161
} : undefined;
160162
}
161163

@@ -170,6 +172,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
170172

171173
this.activeComponent = component;
172174
this.activeEl = enteringEl;
175+
this.activeParams = params;
173176

174177
// commit animation
175178
await this.commit(enteringEl, leavingEl, opts);

‎core/src/components/router-outlet/test/basic/e2e.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
test('getRouteId() should return the segment parameters', async () => {
4+
const page = await newE2EPage({
5+
url: '/src/components/router-outlet/test/basic?ionic:_testing=true'
6+
});
7+
8+
9+
await page.$eval('ion-item[href="#/two/segment"] ion-label', (el: any) => el.click());
10+
await page.waitForChanges();
11+
const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId());
12+
13+
expect(routeId.id).toEqual('PAGE-TWO');
14+
expect(routeId.params).toEqual({ param: 'segment' });
15+
});
16+
17+
test('getRouteId() should return the route parameters', async () => {
18+
const page = await newE2EPage({
19+
url: '/src/components/router-outlet/test/basic?ionic:_testing=true'
20+
});
21+
22+
23+
await page.$eval('ion-item[href="#/page-3"] ion-label', (el: any) => el.click());
24+
await page.waitForChanges();
25+
const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId());
26+
27+
expect(routeId.id).toEqual('PAGE-THREE');
28+
expect(routeId.params).toEqual({ param: 'route' });
29+
});

‎core/src/components/router-outlet/test/basic/index.html‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</ion-header>
2121
<ion-content class="ion-padding">
2222
<h1>Page One</h1>
23-
<ion-button href="#/two">Go to Page Two</ion-button>
23+
<ion-button href="#/two/segment">Go to Page Two</ion-button>
2424
</ion-content>
2525
`;
2626
}
@@ -30,17 +30,14 @@ <h1>Page One</h1>
3030
this.innerHTML = `
3131
<ion-header>
3232
<ion-toolbar>
33-
<ion-buttons slot="start">
34-
<ion-back-button text="Page One"></ion-back-button>
35-
</ion-buttons>
3633
<ion-title>Page Two</ion-title>
3734
</ion-toolbar>
3835
</ion-header>
3936
<ion-content class="ion-padding">
4037
<h1>Page Two</h1>
4138
<div>
4239
<ion-nav-link router-direction="forward" component="page-three">
43-
<ion-button href="#/page-3">Go to Page Two</ion-button>
40+
<ion-button href="#/page-3">Go to Page Three</ion-button>
4441
</ion-nav-link>
4542
</div>
4643
</ion-content>
@@ -52,9 +49,6 @@ <h1>Page Two</h1>
5249
this.innerHTML = `
5350
<ion-header>
5451
<ion-toolbar>
55-
<ion-buttons slot="start">
56-
<ion-back-button text="Page Two"></ion-back-button>
57-
</ion-buttons>
5852
<ion-title>Page Three</ion-title>
5953
</ion-toolbar>
6054
</ion-header>
@@ -74,7 +68,7 @@ <h1>Page Three</h1>
7468
<ion-app>
7569
<ion-router>
7670
<ion-route url="/" component="page-one"> </ion-route>
77-
<ion-route url="/two" component="page-two"> </ion-route>
71+
<ion-route url="/two/:param" component="page-two"> </ion-route>
7872
<ion-route url="/page-3" component="page-three"> </ion-route>
7973
</ion-router>
8074

@@ -89,7 +83,7 @@ <h1>Page Three</h1>
8983
<ion-item href="#/">
9084
<ion-label>Page 1</ion-label>
9185
</ion-item>
92-
<ion-item href="#/two">
86+
<ion-item href="#/two/segment">
9387
<ion-label>Page 2</ion-label>
9488
</ion-item>
9589
<ion-item href="#/page-3">
@@ -102,4 +96,8 @@ <h1>Page Three</h1>
10296
</ion-app>
10397
</body>
10498

99+
<script>
100+
document.querySelector('ion-route[component=page-three]').componentProps = {param: "route"};
101+
</script>
102+
105103
</html>

0 commit comments

Comments
 (0)