如何通过 Ionic 4 选项卡按钮传递参数
<ion-tabs>
<ion-tab-bar slot="top" color="light">
<ion-tab-button tab="tab1">
<ion-label> Tab 1 </ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label> Tab 2 </ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
在我的 tabsmain.module.ts 中,我将其中的每一个路由为
const routes: Routes = [
{
path: '',
component: TabsmainPage, children: [
{ path: '', loadChildren: './pages/tab1/tab1.module#Tab1PageModule' },
{ path: 'tab1/:id2', loadChildren: './pages/tab1/tab1.module#Tab1PageModule' },
{ path: 'tab2', loadChildren: './pages/tab2/tab2.module#Tab2PageModule' }},
]
}
];
我想通过 NavParams 传递一些 ID 作为参数
请帮助我,我如何通过 传递参数 ionic 标签按钮
最佳答案
请在下面找到构建这样的东西的步骤:
首先我创建了一个全新的tabs
应用程序使用 ionic start
命令,然后更新 tabs.router.module.ts
文件以允许 tab2
收到 id
作为参数:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
// ---------------- START: Added by me ----------------
{
path: 'tab2/:id',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
// ---------------- END: Added by me ----------------
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
完成后,我更新了
tabs1
页面是这样的:组件
import { Component } from "@angular/core";
import { Router } from "@angular/router";
@Component({
selector: "app-tab1",
templateUrl: "tab1.page.html",
styleUrls: ["tab1.page.scss"]
})
export class Tab1Page {
public items: Array<{ id: number; name: string }> = [
{
id: 1,
name: "Item 1"
},
{
id: 2,
name: "Item 2"
},
{
id: 3,
name: "Item 3"
},
{
id: 4,
name: "Item 4"
},
{
id: 5,
name: "Item 5"
}
];
constructor(private router: Router) {}
public onOpenItem(item: any) {
this.router.navigate([`tabs/tab2/${item.id}`]);
}
}
HTML
<ion-header>
<ion-toolbar>
<ion-title>
Tab One
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items" (click)="onOpenItem(item)" detail=”true”>
<ion-label>{{item.name}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
正如你在那里看到的,唯一重要的是当用户点击一个项目时,
onOpenItem(...)
由于这一行,方法将更改选定的选项卡:this.router.navigate([`tabs/tab2/${item.id}`]);
然后剩下要做的最后一件事就是更新
tabs2
页面获取id
来自 url 的参数,如下所示:组件
import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: "app-tab2",
templateUrl: "tab2.page.html",
styleUrls: ["tab2.page.scss"]
})
export class Tab2Page {
public id: number;
constructor(public route: ActivatedRoute) {
this.id = this.route.snapshot.params.id;
}
}
HTML
<ion-header>
<ion-toolbar>
<ion-title>
Tab Two
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h2>The selected id is: {{ id }}</h2>
</ion-content>
关于typescript - 如何通过 Ionic 4 选项卡按钮传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56197176/