我使用Ionic Tabs组件生成了一个应用。
标签是交付,关于和联系方式。
然后我生成了一个页面详细信息。
我希望页面详细信息是投放标签的子页面。
当我进入详细信息页面时,我正在浏览交货标签。
有人在Ionic Forum上问了类似的问题
生成的目录结构:
- 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>
这是生成的 deliveries.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 {}
因此,我所有的尝试都失败了,我尝试遵循与上述相同的逻辑。
我试图在 deliveries.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'
}
]
},
]),
找不到从以下位置访问详细信息页面的方法
有可能实现这一目标吗?这有点令人困惑。
现在访问详细信息页面的简单方法是在 app-routing.module.ts ,但它不会属于同一路由器出口。
答案 0 :(得分:5)
使用4.0.0-beta.18离子标签已被删除,因此不必使用命名的插座。
演示(采用两种不同的方法)+ 说明:
https://github.com/servrox/demo-ionic-tab-routing
离子CLI版本 4.10.3
Ionic Framework @ ionic / angular 4.0.1
答案 1 :(得分:2)
所以这是我到目前为止发现的最干净的方法。
这是 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';
import { DetailsPage } from '../details/details.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: '',
redirectTo: '/tabs/(deliveries:deliveries)',
pathMatch: 'full',
},
{
path: 'deliveries',
outlet: 'deliveries',
component: DeliveriesPage,
},
{
path: 'details/:id',
outlet: 'deliveries',
component: DetailsPage
},
{
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.module.ts
中导入DetailsModulePageimport { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsPageRoutingModule } from './tabs.router.module';
import { TabsPage } from './tabs.page';
import { ContactPageModule } from '../contact/contact.module';
import { AboutPageModule } from '../about/about.module';
import { DeliveriesPageModule } from '../deliveries/deliveries.module';
import { DetailsPageModule } from '../details/details.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule,
DeliveriesPageModule,
AboutPageModule,
ContactPageModule,
DetailsPageModule
],
declarations: [TabsPage]
})
export class TabsPageModule {}
DetailsModulePage (非常基本)
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 {}
这是访问DetailsPage的方法
如果您有更好的方法,我会很高兴的。
答案 2 :(得分:2)
这一切都让我感到困惑。 然后我意识到在Tabs Routing中要做的就是。
library(dplyr)
df %>%
group_by(Var) %>%
mutate(Mean = mean(Value)) %>%
slice(which.max(Value))
# Date Var Value Mean
# <fct> <fct> <int> <dbl>
#1 27/9/2019 A 56 53
#2 2/10/2019 B 100 95
Tab2包含一个列表页面和一个详细信息页面。
列表页面网址:/ tabs / tab2
详细信息页面网址:/ tabs / tab2 / 123 /
当您在列表或详细信息页面上时,Tab2选项卡将保持活动状态,而当您在详细信息页面上时,将显示返回按钮。
答案 3 :(得分:1)
这就是我的做法。在 tabs.router.module.ts 中,
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'featured',
children: [
{
path: '',
loadChildren: '../tab-featured/tab-featured.module#TabFeaturedPageModule'
}
]
},
{
path: 'featured/:id',
children: [
{
path: '',
loadChildren: '../tab-featured-detail/tab-featured-detail.module#TabFeaturedDetailPageModule'
}
]
},
{
path: 'categories',
children: [
{
path: '',
loadChildren: '../tab-category/tab-category.module#TabCategoryPageModule'
}
]
},
{
path: 'popular',
children: [
{
path: '',
loadChildren: '../tab-popular/tab-popular.module#TabPopularPageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/featured',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/featured',
pathMatch: 'full'
}
];
tab-featured-detail.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 { TabFeaturedDetailPage } from './tab-featured-detail.page';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: TabFeaturedDetailPage }])
],
declarations: [TabFeaturedDetailPage]
})
export class TabFeaturedDetailPageModule {}