0

我有一个离子标签应用程序，需要将参数从 TabsPage.ts 传递给 Tab2Page.ts 以便在 Tab2Page.html 中使用它。这些选项卡与路由系统一起使用。我四处搜索，但没有发现任何帮助。任何帮助表示赞赏。

标签页.ts：

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-tabs',
      templateUrl: 'tabs.page.html',
      styleUrls: ['tabs.page.scss']
    })
    export class TabsPage {
        paramToPass: string; 
        constructor() {
          paramToPass = 'test';
    }

Tab2Page.ts：

    import { Component} from '@angular/core';

    @Component({
      selector: 'app-tab2',
      templateUrl: 'tab2.page.html',
      styleUrls: ['tab2.page.scss']
    })
    export class Tab2Page  {

    constructor() {
      //here I need to get paramToPass parameter
    }
    }

标签页.html：

    <ion-tabs>
      <ion-tab-bar slot="bottom">   
        <ion-tab-button tab="tab2">
          <ion-icon name="apps"></ion-icon>
          <ion-label>Tab Two</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
     </ion-tabs>

标签路由器模块：

    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: 'tab2',
         children: [
           {
             path: '',
             loadChildren: () =>
             import('../tab2/tab2.module').then(m => m.Tab2PageModule)
           }
         ]
       },

      ]
      },
       ...
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
      ];

      @NgModule({
         imports: [RouterModule.forChild(routes)],
          exports: [RouterModule]
       })
      export class TabsPageRoutingModule {}
4

1 回答 1

1

尝试使用 Input() 属性通过选项卡传递数据：

请参阅 Angular 文档：@Input()-Property

于 2019-10-31T17:05:53.393 回答