Hello Ionic Community,
I’m currently migrating my ionic3 project to ionic4, with no prior knowledge of pure angular projects.
So naturally i have some problems with the new navigation.
After reading through the angular docs and some experimenting i got the hang of the routing and normal navigation. But i just can’t get navigation inside a tab-menu to work.
Creating a tab-menu and navigating between them works, but i don’t know how i can navigate deeper into a tab, while preserving the tab-menu and the ability to switch between tabs and have the view of a tab preserved.
Relevant Code:
app.routing.module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'tutorial', loadChildren: './pages/tutorial/tutorial.module#TutorialPageModule' },
{ path: '', redirectTo: 'tutorial', pathMatch: 'full' },
{ path: '', loadChildren: './pages/tabs-main/tabs-main.module#TabsMainPageModule' },
{ path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './pages/auth/signup/signup.module#SignupPageModule' },
{ path: 'authReset', loadChildren: './pages/auth/auth-reset/auth-reset.module#AuthResetPageModule' },
{ path: 'contract/:id', loadChildren: './pages/contracts/contract-details/contract-details.module#ContractDetailsPageModule'},
{ path: '**', loadChildren: './pages/page-not-found/page-not-found.module#PageNotFoundPageModule'},
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
enableTracing: false,
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
Ignore the other pages, tutorial, login stuff and redirecting to the tabs menu are working
tabs.module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TabsMainPage } from './tabs-main.page';
import { ContractPage } from '../contracts/contract/contract.page';
import { ContractPageModule } from '../contracts/contract/contract.module';
import { ContractDetailsPage } from '../contracts/contract-details/contract-details.page';
import { ContractDetailsPageModule } from '../contracts/contract-details/contract-details.module';
import { UserAreaPage } from '../user-area/user-area.page';
import { MorePage } from '../more/more.page';
import { UserAreaPageModule } from '../user-area/user-area.module';
import { MorePageModule } from '../more/more.module';
const routes: Routes = [
{
path: 'tabs',
component: TabsMainPage,
children: [
{
path: 'contracts',
outlet: 'contracts',
component: ContractPage,
children: [
{
path: 'contracts/details/:id',
outlet: 'contracts',
component: ContractDetailsPage,
}
]
},
{
path: 'userarea',
outlet: 'userarea',
component: UserAreaPage,
},
{
path: 'more',
outlet: 'more',
component: MorePage,
}
]
}, {
path: '',
redirectTo: '/tabs/(contracts:contracts)',
pathMatch: 'full'
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ContractPageModule,
UserAreaPageModule,
MorePageModule,
ContractDetailsPageModule,
RouterModule.forChild(routes)
],
declarations: [TabsMainPage]
})
export class TabsMainPageModule { }
tabs template
<ion-tabs>
<ion-tab label="Home" icon="home" href="/tabs/(contracts:contracts)">
<ion-router-outlet name="contracts"></ion-router-outlet>
</ion-tab>
<ion-tab label="Contact" icon="contacts" href="/tabs/(userarea:userarea)">
<ion-router-outlet name="userarea"></ion-router-outlet>
</ion-tab>
<ion-tab label="Contact" icon="contacts" href="/tabs/(more:more)">
<ion-router-outlet name="more"></ion-router-outlet>
</ion-tab>
</ion-tabs>
In the contracts tab i only have a button to push to a detail page to test:
push():void{
this.router.navigate(['details', '10'], {
relativeTo: this.route,
})
}
This does not work however, it just somehow redirects to: /tabs.
the url for the contracts list looks like: /tabs/(contracts:contracts)
but how should the details page url look like?
i tried:
/tabs/(contracts:contracts)/details/id
/tabs/(contracts/details/id:contracts)
/tabs/(contracts:contracts/details/id)
but nothing worked.
Can somebody please enlighten me how deeper navigation inside of a tab-menu works? I’m at my wits end.
EDIT:----------------------------------
I managed to make it work by having the details page in the tab router as sibling to the other tabs.
new routerconfig in tabs.module:
const routes: Routes = [
{
path: 'tabs',
component: TabsMainPage,
children: [
{
path: '',
redirectTo: '/tabs/(contracts:contracts)',
pathMatch: 'full'
},
{
path: 'contracts',
outlet: 'contracts',
component: ContractPage,
},
{
path: 'contracts/details/:id',
outlet: 'contracts',
component: ContractDetailsPage,
},
{
path: 'userarea',
outlet: 'userarea',
component: UserAreaPage,
},
{
path: 'more',
outlet: 'more',
component: MorePage,
}
]
},
{
path: '',
redirectTo: '/tabs/(contracts:contracts)',
pathMatch: 'full'
}
];
That means that i would have to load all pages that i want to navigate to into the tabs.router.module as route-sibling of the tabs. And if i want to access a page from multiple tabs, i need to add page for every tab i want to access it from.
Is there no simpler way?