Hi everyone,
how is it possible to route to lazy loaded tabs via an ion-item? I created just the ionic 4 starter tabs template with one tab as a menu (called maintabs). Within the menu tab I have an ion-item which should open another tabs (called consumer-tabs). When clicking this item, nothing happens and the new route as well as the consumer tabs are not shown.
Does anyone have a solution?
Kind regards,
Thomas
Screenshot:
Here is my code:
App Routing:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './pages/maintabs/maintabs.module#MaintabsModule' },
{ path: '', loadChildren: './pages/consumer/tabs/consumer-tabs.module#ConsumerTabsModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Maintabs Routing:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MaintabsPage } from './maintabs.page';
import { MenuPage } from '../menu/menu.page';
const routes: Routes = [
{
path: 'tabs',
component: MaintabsPage,
children: [
{
path: 'menu',
outlet: 'menu',
component: MenuPage
}
]
},
{
path: '',
redirectTo: '/tabs/(menu:menu)',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/tabs/(menu:menu)',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MaintabsRouting { }
Maintabs html:
<ion-tabs tabbarPlacement="top">
<ion-tab label="Home" icon="menu" href="/tabs/(menu:menu)">
<ion-router-outlet name="menu"></ion-router-outlet>
</ion-tab>
</ion-tabs>
Consumer Routing:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ConsumerTabsPage } from './consumer-tabs.page';
import { ConsumerHomeListPage } from '../homepage/consumer-home-list/consumer-home-list.page';
const routes: Routes = [
{
path: 'consumer',
component: ConsumerTabsPage,
children: [
{
path: 'homepage',
outlet: 'homepage',
component: ConsumerHomeListPage
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ConsumerTabsRouting { }
ConsumerTabs html:
<ion-tabs tabbarPlacement="top">
<ion-tab label="Homepage" icon="menu" href="/consumer/(homepage:homepage)">
<ion-router-outlet name="homepage"></ion-router-outlet>
</ion-tab>
</ion-tabs>
Menu html:
<ion-content>
<ion-card>
<ion-item button class="cursor" href="/consumer/(homepage:homepage)">
<ion-avatar slot="start">
<img src="assets/images/Michael.jpg">
</ion-avatar>
<ion-label>
<h2 class="text-bolder">Michael BaĆler</h2>
<p>@MichaelBaĆler</p>
<p>100,000 Followers</p>
</ion-label>
</ion-item>
</ion-card>
</ion-content>