Angular-Ionic routing loads the previous tab instead of the selected tab

Issue

I'm building an Angular-Ionic application. I am using the standalone approach. i have in my 'tabs.routes-ts' which points to my 3 tab routes. Tab 3 points to another route list called 'settings-routes.ts' here i want to show my settings options of the app. currently i only have the route to darkmode change. navigation works too.

now to my problem:

if i go from tab tab3 to tab3/colormode and back to tab2. the app works. but if i want to change from tab2 to tab tab3. instead of tab3 tab tab3/colormode appears. I am aware that angular saves the last defined route. how can I fix this, or tell it to go to "tab3" first and then the user can decide where to go.

What I have tried:

i tried to add a childern array in the 'settings-routes.ts'. this did not work.

tabs.routes.ts

import { Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { Tab1Page } from '../tab1/tab1.page';
import { Tab2Page } from '../tab2/tab2.page';
import { Tab3Page } from '../tab3/tab3.page';

export const routes: Routes = [
{
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
          component: Tab1Page
      },
      {
        path: 'tab2',
          component: Tab2Page
      },
      {
        path: 'tab3',
        loadChildren: () =>
          import('../tab3/settings-routes').then((m) => m.SettingsRoutes),

      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full',
      },
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full',
  }, 

];

settings-routes.ts

import { Route } from "@angular/router";
import { Tab3Page } from "./tab3.page";
import { ColormodeComponent } from "./settings/colormode/colormode.component";

export const SettingsRoutes: Route[] = [
    {
        path: '',
        component: Tab3Page,

        //dont work
        /* children: [{
            path: 'colormode',
            component: ColormodeComponent
        }] */
    },
    {
        path: 'colormode',
        component: ColormodeComponent
    }
]

tab3.page.html

<ion-header>
  <ion-toolbar color="secondary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Settings</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>

  <ion-card class="bg-white ion-no-margin">
    <ion-card-content>

      <h1 margin-bottom>
        <ion-text color="primary"><strong>test</strong></ion-text>
      </h1>
      
      <p margin-bottom>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odio placeat incidunt nesciunt atque ratione
        quisquam, fugit omnis maxime adipisci excepturi dignissimos aliquam asperiores itaque unde sequi? Minus, quia,
        dolore?
      </p>

       <nav>
        <ul>
          <li>
            <a routerLink="colormode">Colormode</a>
          </li>
        </ul>
       </nav>

       
    </ion-card-content>
  </ion-card>


</ion-content>

Solution

This behaviour of tabs is intended. when you go to a child page of a tab, that is saved and you will go the saved page whenever you try to go to that tab until you go back by other means. If this is not what you want, you have two workarounds:

1. Don't use the tab3/colormode page as a child page. have an independent page (like /colormode) and go to that page whenever a specific button is clicked. Of course you won't have you the tabs in this page any longer, which is a better UX in my opinion and I suggest this solution.
2. Detect when the user clicks the tab (by (click) event) and forcefully load the page you want whenever the tab is clicked.

Answered By - AmirAli Saghaei