如何通过 Ionic 4 选项卡按钮传递参数

Question

如何通过 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传递参数

Answer 1

请在下面找到构建类似内容的步骤：

\n\n

\n\n\n\n

tabs首先，我使用命令创建了一个全新的应用程序ionic start，然后更新了tabs.router.module.ts文件以允许tab2接收idas 参数：

\n\n

import { NgModule } from \'@angular/core\';\nimport { RouterModule, Routes } from \'@angular/router\';\nimport { TabsPage } from \'./tabs.page\';\n\nconst routes: Routes = [\n  {\n    path: \'tabs\',\n    component: TabsPage,\n    children: [\n      {\n        path: \'tab1\',\n        children: [\n          {\n            path: \'\',\n            loadChildren: \'../tab1/tab1.module#Tab1PageModule\'\n          }\n        ]\n      },\n    {\n        path: \'tab2\',\n        children: [\n          {\n            path: \'\',\n            loadChildren: \'../tab2/tab2.module#Tab2PageModule\'\n          }\n        ]\n      },\n      // ---------------- START: Added by me  ----------------\n      {\n        path: \'tab2/:id\',\n        children: [\n          {\n            path: \'\',\n            loadChildren: \'../tab2/tab2.module#Tab2PageModule\'\n          }\n        ]\n      },\n      // ---------------- END: Added by me  ----------------\n      {\n        path: \'tab3\',\n        children: [\n          {\n            path: \'\',\n            loadChildren: \'../tab3/tab3.module#Tab3PageModule\'\n          }\n        ]\n      },\n      {\n        path: \'\',\n        redirectTo: \'/tabs/tab1\',\n        pathMatch: \'full\'\n      }\n    ]\n  },\n  {\n    path: \'\',\n    redirectTo: \'/tabs/tab1\',\n    pathMatch: \'full\'\n  }\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forChild(routes)\n  ],\n  exports: [RouterModule]\n})\nexport class TabsPageRoutingModule {}\n\n

\n\n

完成后，我更新了页面，tabs1如下所示：

\n\n

成分

\n\n

import { Component } from "@angular/core";\nimport { Router } from "@angular/router";\n\n@Component({\n  selector: "app-tab1",\n  templateUrl: "tab1.page.html",\n  styleUrls: ["tab1.page.scss"]\n})\nexport class Tab1Page {\n  public items: Array<{ id: number; name: string }> = [\n    {\n      id: 1,\n      name: "Item 1"\n    },\n    {\n      id: 2,\n      name: "Item 2"\n    },\n    {\n      id: 3,\n      name: "Item 3"\n    },\n    {\n      id: 4,\n      name: "Item 4"\n    },\n    {\n      id: 5,\n      name: "Item 5"\n    }\n  ];\n\n  constructor(private router: Router) {}\n\n  public onOpenItem(item: any) {\n    this.router.navigate([`tabs/tab2/${item.id}`]);\n  }\n}\n

\n\n

超文本标记语言

\n\n

<ion-header>\n  <ion-toolbar>\n    <ion-title>\n      Tab One\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-list>\n    <ion-item *ngFor="let item of items" (click)="onOpenItem(item)" detail=\xe2\x80\x9dtrue\xe2\x80\x9d>\n      <ion-label>{{item.name}}</ion-label>\n    </ion-item>\n  </ion-list>\n</ion-content>\n

\n\n

正如您所看到的，唯一重要的是，当用户单击某个项目时，该onOpenItem(...)方法将由于这一行而更改所选选项卡：

\n\n

this.router.navigate([`tabs/tab2/${item.id}`]);\n

\n\n

然后剩下的最后一件事就是更新页面以从 url 中tabs2获取参数，如下所示：id

\n\n

成分

\n\n

import { Component } from "@angular/core";\nimport { ActivatedRoute } from "@angular/router";\n\n@Component({\n  selector: "app-tab2",\n  templateUrl: "tab2.page.html",\n  styleUrls: ["tab2.page.scss"]\n})\nexport class Tab2Page {\n\n  public id: number;\n\n  constructor(public route: ActivatedRoute) {\n    this.id = this.route.snapshot.params.id;\n  }\n}\n

\n\n

超文本标记语言

\n\n

<ion-header>\n  <ion-toolbar>\n    <ion-title>\n      Tab Two\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <h2>The selected id is: {{ id }}</h2>\n</ion-content>\n

\n