Я создал приложение с компонентом Ionic Tabs.
Вкладки Поставки , О и Контакт .
Затем я сгенерировал страницу Подробности .
Я бы хотел, чтобы страница Детали была дочерней по отношению к Поставки tab.
То есть, когда я на странице детали , я перехожу на вкладку доставки .
Кто-то задал похожий вопрос на форуме Ionic
Созданная структура каталогов:
- about
- contact
- deliveries
deliveries.module.ts
- details
details.module.ts
- tabs
tabs.module.ts
tabs.page.html
tabs.router.module.ts
app.module.ts
app-routing.module.ts
Это сгенерированный app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule {}
Этоэто сгенерированный tabs.router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { DeliveriesPage } from '../deliveries/deliveries.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(deliveries:deliveries)',
pathMatch: 'full',
},
{
path: 'deliveries',
outlet: 'deliveries',
component: DeliveriesPage
},
{
path: 'about',
outlet: 'about',
component: AboutPage
},
{
path: 'contact',
outlet: 'contact',
component: ContactPage
}
]
},
{
path: '',
redirectTo: '/tabs/(deliveries:deliveries)',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
Это сгенерированный tabs.page.html
<ion-tabs>
<ion-tab label="Deliveries" icon="bicycle" href="/tabs/(deliveries:deliveries)">
<ion-router-outlet name="deliveries"></ion-router-outlet>
</ion-tab>
<ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
<ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
</ion-tabs>
Thisэто сгенерированный deliveryries.module.ts
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DeliveriesPage } from './deliveries.page';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([
{
path: '',
component: DeliveriesPage
}
])
],
declarations: [
DeliveriesPage
]
})
export class DeliveriesPageModule {}
Это details.module.ts
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 { DetailsPage } from './details.page';
const routes: Routes = [
{
path: '',
component: DetailsPage,
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [DetailsPage]
})
export class DetailsPageModule {}
Итак, все мои попыткине удалось, я пытался следовать той же логике, что и выше.
Я пытался работать в delivery.module.ts
RouterModule.forChild([
{
path: '',
component: DeliveriesPage,
},
{
path: 'details',
loadChildren: '../details/details.module#DetailsPageModule'
}
]),
Я также пытался
RouterModule.forChild([
{
path: '',
component: DeliveriesPage,
},
{
path: 'details',
outlet: 'deliveries
loadChildren: '../details/details.module#DetailsPageModule'
}
]),
Или
RouterModule.forChild([
{
path: '',
component: DeliveriesPage,
children: [
{
path: 'details',
loadChildren: '../details/details.module#DetailsPageModule'
}
]
},
]),
Не могу найти способ доступастраница сведений из
- / вкладки / (поставки: поставки) / детали
- / вкладки / (поставки: детали)
Возможно ли достичьтот?Это немного сбивает с толку.
Самый простой способ получить доступ к странице details - определить маршрут в app-routing.module.ts , но этоне будет частью той же розетки маршрутизатора.