typescript - 如何通过 Ionic 4 选项卡按钮传递参数
问题描述
如何通过 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 作为参数请帮助我,如何通过ion-tab-button传递参数
解决方案
请在下面找到构建类似这样的步骤:
tabs
首先,我使用命令创建了一个全新的应用程序ionic start
,然后更新了tabs.router.module.ts
文件以允许tab2
接收id
as 参数:
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>
推荐阅读
- haxe - 当我尝试构建 FNF Kade Engine 的源代码时它不起作用(石灰测试和构建明智)
- javascript - 如何通过用省略号替换某些字符来缩短字符串
- python - 是否可以使用 python 生成的链接在 selenium(python) 中打开选项卡?
- javascript - global_navtree 未在荷兰语页面上定义,但在其他语言上
- apache-camel - 与骆驼 3.7.3 升级和 cxf 3.4.3 握手期间远程连接关闭
- javascript - 使用滑块控制音频
- r - R中的分组箱线图 - 我的错误在哪里?
- laravel - 我可以忽略这个热点安全警报吗?
- android - Android资源链接失败-imageview
- memory - Xarray 切片绘图会导致内存错误,它会抛出原始大小而不是数据数组的新大小?