mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
fix(router-outlet): getRouteId() returns the params set in setRouteId(). (#24656)
resolves #24652
This commit is contained in:
Victor Berchet
4
core/src/components.d.ts
vendored
4
core/src/components.d.ts
vendored
@ -2254,7 +2254,7 @@ export namespace Components {
|
||||
*/
|
||||
"animated": boolean;
|
||||
/**
|
||||
* 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.
|
||||
* This property allows to create custom transition using AnimateBuilder functions.
|
||||
*/
|
||||
"animation"?: AnimationBuilder;
|
||||
"commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
|
||||
@ -5925,7 +5925,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"animated"?: boolean;
|
||||
/**
|
||||
* 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.
|
||||
* This property allows to create custom transition using AnimateBuilder functions.
|
||||
*/
|
||||
"animation"?: AnimationBuilder;
|
||||
"delegate"?: FrameworkDelegate;
|
||||
|
||||
@ -31,9 +31,9 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ |
|
||||
| ----------- | ---------- | -------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ |
|
||||
| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` |
|
||||
| `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` |
|
||||
| `animation` | -- | This property allows to create custom transition using AnimateBuilder functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` |
|
||||
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
|
||||
|
||||
private activeEl: HTMLElement | undefined;
|
||||
private activeComponent: any;
|
||||
private activeParams: any;
|
||||
private waitPromise?: Promise<void>;
|
||||
private gesture?: Gesture;
|
||||
private ani?: Animation;
|
||||
@ -36,10 +37,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
|
||||
*/
|
||||
@Prop() animated = true;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/** This property allows to create custom transition using AnimateBuilder functions. */
|
||||
@Prop() animation?: AnimationBuilder;
|
||||
|
||||
/** @internal */
|
||||
@ -156,6 +154,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
|
||||
return active ? {
|
||||
id: active.tagName,
|
||||
element: active,
|
||||
params: this.activeParams,
|
||||
} : undefined;
|
||||
}
|
||||
|
||||
@ -170,6 +169,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
|
||||
|
||||
this.activeComponent = component;
|
||||
this.activeEl = enteringEl;
|
||||
this.activeParams = params;
|
||||
|
||||
// commit animation
|
||||
await this.commit(enteringEl, leavingEl, opts);
|
||||
|
||||
29
core/src/components/router-outlet/test/basic/e2e.ts
Normal file
29
core/src/components/router-outlet/test/basic/e2e.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('getRouteId() should return the segment parameters', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/router-outlet/test/basic?ionic:_testing=true'
|
||||
});
|
||||
|
||||
|
||||
await page.$eval('ion-item[href="#/two/segment"] ion-label', (el: any) => el.click());
|
||||
await page.waitForChanges();
|
||||
const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId());
|
||||
|
||||
expect(routeId.id).toEqual('PAGE-TWO');
|
||||
expect(routeId.params).toEqual({ param: 'segment' });
|
||||
});
|
||||
|
||||
test('getRouteId() should return the route parameters', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/router-outlet/test/basic?ionic:_testing=true'
|
||||
});
|
||||
|
||||
|
||||
await page.$eval('ion-item[href="#/page-3"] ion-label', (el: any) => el.click());
|
||||
await page.waitForChanges();
|
||||
const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId());
|
||||
|
||||
expect(routeId.id).toEqual('PAGE-THREE');
|
||||
expect(routeId.params).toEqual({ param: 'route' });
|
||||
});
|
||||
@ -20,7 +20,7 @@
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page One</h1>
|
||||
<ion-button href="#/two">Go to Page Two</ion-button>
|
||||
<ion-button href="#/two/segment">Go to Page Two</ion-button>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
@ -30,9 +30,6 @@
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Page One"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -40,7 +37,7 @@
|
||||
<h1>Page Two</h1>
|
||||
<div>
|
||||
<ion-nav-link router-direction="forward" component="page-three">
|
||||
<ion-button href="#/page-3">Go to Page Two</ion-button>
|
||||
<ion-button href="#/page-3">Go to Page Three</ion-button>
|
||||
</ion-nav-link>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -52,9 +49,6 @@
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Page Two"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -74,7 +68,7 @@
|
||||
<ion-app>
|
||||
<ion-router>
|
||||
<ion-route url="/" component="page-one"> </ion-route>
|
||||
<ion-route url="/two" component="page-two"> </ion-route>
|
||||
<ion-route url="/two/:param" component="page-two"> </ion-route>
|
||||
<ion-route url="/page-3" component="page-three"> </ion-route>
|
||||
</ion-router>
|
||||
|
||||
@ -89,7 +83,7 @@
|
||||
<ion-item href="#/">
|
||||
<ion-label>Page 1</ion-label>
|
||||
</ion-item>
|
||||
<ion-item href="#/two">
|
||||
<ion-item href="#/two/segment">
|
||||
<ion-label>Page 2</ion-label>
|
||||
</ion-item>
|
||||
<ion-item href="#/page-3">
|
||||
@ -102,4 +96,8 @@
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
document.querySelector('ion-route[component=page-three]').componentProps = {param: "route"};
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user