Как передать параметр из контейнера вкладок в одну вкладку в ионном 4 - PullRequest
Новая
       50

Как передать параметр из контейнера вкладок в одну вкладку в ионном 4

0 голосов
/ 31 октября 2019

У меня есть приложение для ионных вкладок, и мне нужно передать параметр из TabsPage.ts в Tab2Page.ts, чтобы использовать его в Tab2Page.html. Вкладки работают с системой маршрутизации. Я погуглил вокруг, но не нашел ничего полезного. Любая помощь приветствуется.

TabsPage.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
    }
    }

TabsPage.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 {}

1 Ответ

0 голосов
/ 31 октября 2019

Попробуйте передать данные через вкладки, используя свойство Input ():

См. Angular Doc's: @ Input () - Свойство

...