如何在 Ionic 4 中将数据从空白页传递到选项卡页

Question

我是ionic的新手。
我想将参数从一个页面传递到选项卡页面。
基本上它是一个地点列表。单击该项目后，我想传递place_id以放置标签页。
有 3 个选项卡：地点详细信息、成员列表、事件。
我想将place_id传递给所有页面。
单击项目时，如果我将参数传递到选项卡页面，它将不起作用。但是没有参数，它可以完美地工作。它将转到选项卡页面。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'tab',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
},
{
path: 'member-detail',
loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
},
{
path: 'member-detail/:userId',
loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
},
{
path: '',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
},
{
path: 'register',
loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
},
{
path: 'forgot-password',
loadChildren: () => import('./forgot-password/forgot-password.module').then( m => m.ForgotPasswordPageModule)
},
{
path: 'otp',
loadChildren: () => import('./otp/otp.module').then( m => m.OtpPageModule)
},
{
path: 'edit-profile',
loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
},
{
path: 'forgot-change-password',
loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
},
{
path: 'forgot-change-password/:contact',
loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
},
{
path: 'member-list',
loadChildren: () => import('./member-list/member-list.module').then( m => m.MemberListPageModule)
},
{
path: 'places',
loadChildren: () => import('./places/places.module').then( m => m.PlacesPageModule)
},
// {
//   path: 'place-tab',
//   loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
// },
{
path: 'place-tab/:placeId',
loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
},
{
path: '',
loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
},
{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

places.page.ts

placeDetail(placeId: string) {
console.log(placeId);
this.router.navigate(['/place-tab/', placeId]);
// this.router.navigateByUrl('/place-tab');
}     

place-tab.page.ts

export class PlaceTabPage {
placeId: any;
constructor(private activatedRoute: ActivatedRoute) { 
this.activatedRoute.params.subscribe(params => {
this.placeId = params['placeId']; 
});
console.log(this.placeId);
}
}  

place-tab-routing.module.ts

const routes: Routes = [
{
path: 'place-tab',
component: PlaceTabPage,
children: [
{
path: 'place-detail',
children: [
{
path: '',
loadChildren: () =>
import('../place-detail/place-detail.module').then(m => m.PlaceDetailPageModule)
}
]
},
{
path: 'place-member',
children: [
{
path: '',
loadChildren: () =>
import('../place-member/place-member.module').then(m => m.PlaceMemberPageModule)
}
]
},
{
path: 'place-event',
children: [
{
path: '',
loadChildren: () =>
import('../place-event/place-event.module').then(m => m.PlaceEventPageModule)
}
]
},
{
path: '',
redirectTo: '/place-tab/place-detail',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/place-tab/place-detail',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PlaceTabPageRoutingModule { }

Answer 1

下面是如何将数据传递到选项卡组件并在子选项卡的整个导航过程中维护该状态的示例。这个解决方案确实感觉有点笨拙，所以如果在某个时候出现更好的答案，我不会感到惊讶。

假设我们将通过单击按钮从home.page.html导航到tabs.page.html。您可以将点击事件注册到home.page.ts函数，并在该函数中使用 Angular 的路由器导航到选项卡页面。这里的诀窍是添加导航附加功能，您可以在其中添加状态。Angular 文档将状态属性定义为：

可传递给任何导航的开发人员定义的状态。在执行导航时，通过从router.getCurrentNavigation((返回的Navigation.extras对象访问此值。

导航完成后，路由器会将包含此值的对象以及 navigationId 写入 history.state。该值是在激活此路由之前调用 location.go(( 或 location.replaceState(( 时写入的。

state 属性可以包含要传递到路由的任何内容。html 和 ts 文件看起来像这样

home.page.html

<ion-content>
<ion-button (click)="routeToTabs(1)">Pass the ID of 1 to tabs pages</ion-button>
<ion-button (click)="routeToTabs(2)">Pass the ID of 2 to tabs pages</ion-button>
<ion-button (click)="routeToTabs(3)">Pass the ID of 3 to tabs pages</ion-button>
</ion-content>

home.page.ts

import { Router, NavigationExtras } from '@angular/router';
...
export class HomePage implements OnInit {
constructor(private router: Router) { }
routeToTabs(myId: any) {
const navigationExtras: NavigationExtras = { state: { id: myId } };
this.router.navigate(['tabs'], navigationExtras);
}
}

导航完成后，state 属性就会消失(有点 - 它存储在 history.state 属性中(，因此在tabs.page.ts构造函数中获取传入的数据并将其分配给像这样的局部变量

export class TabsPage implements OnInit {
id: any;
constructor(private router: Router) {
const navigation = this.router.getCurrentNavigation();
const state = navigation.extras.state;
this.id = state.id;
}
}

这是感觉不太对劲的地方...在tabs.page.html将单击事件添加到所有选项卡，调用函数并向其传递选项卡名称，如下所示

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" (click)="routeToTab('tab1')">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" (click)="routeToTab('tab2')">
<ion-icon name="ellipse"></ion-icon>
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3" (click)="routeToTab('tab3')">
<ion-icon name="square"></ion-icon>
<ion-label>Tab 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

在tabs.page.ts添加将状态添加到导航附加功能并路由到选项卡的函数

routeToTab(tabRoute: string) {
const navigationExtras: NavigationExtras = {
state: { id: this.id }
};
this.router.navigate(['tabs/' + tabRoute], navigationExtras);
}

最后，在每个选项卡组件文件中，添加到构造函数并提取状态对象传入的数据

id: any;
constructor(private router: Router) {
const navigation = this.router.getCurrentNavigation();
const state = navigation.extras.state
this.id = state.id;
}

我想就是这样。希望这有帮助。