fix(router-outlet): getRouteId() returns the params set in setRouteId…

…(). (#24656) resolves #24652
ionic-team · Feb 9, 2022 · be2205e · be2205e
1 parent c40ff12
commit be2205e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 21 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -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;

diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md
@@ -30,11 +30,11 @@ 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`        |
-| `mode`      | `mode`     | The mode determines which platform styles to use.                                                                                                                                              | `"ios" \| "md"`                                         | `getIonMode(this)` |
+| Property    | Attribute  | Description                                                                      | Type                                                    | Default            |
+| ----------- | ---------- | -------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ |
+| `animated`  | `animated` | If `true`, the router-outlet should animate the transition of components.        | `boolean`                                               | `true`             |
+| `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)` |
 
 
 ----------------------------------------------

diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
@@ -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);

diff --git a/core/src/components/router-outlet/test/basic/e2e.ts b/core/src/components/router-outlet/test/basic/e2e.ts
@@ -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' });
+});
diff --git a/core/src/components/router-outlet/test/basic/index.html b/core/src/components/router-outlet/test/basic/index.html
@@ -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,17 +30,14 @@ <h1>Page One</h1>
         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>
           <ion-content class="ion-padding">
             <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 @@ <h1>Page Two</h1>
         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 @@ <h1>Page Three</h1>
   <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 @@ <h1>Page Three</h1>
           <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 @@ <h1>Page Three</h1>
   </ion-app>
 </body>
 
+<script>
+  document.querySelector('ion-route[component=page-three]').componentProps = {param: "route"};
+</script>
+
 </html>