как передать данные с пустой страницы на страницу вкладок в ioni c 4

Question

Я новичок в ioni c.
Я хочу передать параметр с одной страницы на страницу вкладок.
По сути, это список мест. При нажатии на элемент я хочу передать place_id для размещения страниц вкладок.
Есть 3 вкладки: Детализация места, Список участников, События.
Я хочу передать place_id всем страницам.
При нажатии кнопки элемент, если я передам параметр на страницу вкладок, он не будет работать. Но без параметра работает отлично. Он переходит на страницу вкладок.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'tab',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'member-detail',
    loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
  },
  {
    path: 'member-detail/:userId',
    loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'forgot-password',
    loadChildren: () => import('./forgot-password/forgot-password.module').then( m => m.ForgotPasswordPageModule)
  },
  {
    path: 'otp',
    loadChildren: () => import('./otp/otp.module').then( m => m.OtpPageModule)
  },
  {
    path: 'edit-profile',
    loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
  },
  {
    path: 'forgot-change-password',
    loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
  },
  {
    path: 'forgot-change-password/:contact',
    loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
  },
  {
    path: 'member-list',
    loadChildren: () => import('./member-list/member-list.module').then( m => m.MemberListPageModule)
  },
  {
    path: 'places',
    loadChildren: () => import('./places/places.module').then( m => m.PlacesPageModule)
  },
  // {
  //   path: 'place-tab',
  //   loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
  // },
  {
    path: 'place-tab/:placeId',
    loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

place.page.ts

placeDetail(placeId: string) {
    console.log(placeId);
    this.router.navigate(['/place-tab/', placeId]);
    // this.router.navigateByUrl('/place-tab');
  }     

place-tab.page.ts

export class PlaceTabPage {
  placeId: any;
  constructor(private activatedRoute: ActivatedRoute) { 
    this.activatedRoute.params.subscribe(params => {
      this.placeId = params['placeId']; 
    });
    console.log(this.placeId);
  }
}  

place-tab-routing.module.ts

const routes: Routes = [
  {
    path: 'place-tab',
    component: PlaceTabPage,
    children: [
      {
        path: 'place-detail',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../place-detail/place-detail.module').then(m => m.PlaceDetailPageModule)
          }
        ]
      },
      {
        path: 'place-member',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../place-member/place-member.module').then(m => m.PlaceMemberPageModule)
          }
        ]
      },
      {
        path: 'place-event',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../place-event/place-event.module').then(m => m.PlaceEventPageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/place-tab/place-detail',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/place-tab/place-detail',
    pathMatch: 'full'
  }
];

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

Answer 1

Вот пример того, как вы можете передавать данные в компонент вкладок и поддерживать это состояние во время навигации дочерних вкладок. Это решение кажется немного неуклюжим, поэтому меня не удивит, если в какой-то момент появится лучший ответ.

Давайте предположим, что мы будем переходить от home.page.html к tabs.page.html нажатием кнопки. Вы можете зарегистрировать событие щелчка для функции в home.page.ts и в этой функции использовать маршрутизатор Angular для перехода на страницу вкладок. Хитрость заключается в том, чтобы добавить NavigationExtras, где вы можете добавить состояние. Angular документы определяют свойство состояния следующим образом:

Определенное разработчиком состояние, которое можно передать любой навигации. Получите доступ к этому значению через объект Navigation.extras, возвращенный от router.getCurrentNavigation () во время выполнения навигации.

После завершения навигации маршрутизатор записывает объект, содержащий это значение, вместе с навигационным идентификатором в history.state. Значение записывается, когда location. go () или location.replaceState () вызывается перед активацией этого маршрута.

Свойство состояния может содержать все, что вы хотите передать по маршруту. Файл html и ts будет выглядеть примерно так:

home.page.html

<ion-content>
  <ion-button (click)="routeToTabs(1)">Pass the ID of 1 to tabs pages</ion-button>
  <ion-button (click)="routeToTabs(2)">Pass the ID of 2 to tabs pages</ion-button>
  <ion-button (click)="routeToTabs(3)">Pass the ID of 3 to tabs pages</ion-button>
</ion-content>

home.page.ts

import { Router, NavigationExtras } from '@angular/router';

...
export class HomePage implements OnInit {

  constructor(private router: Router) { }

  routeToTabs(myId: any) {
    const navigationExtras: NavigationExtras = { state: { id: myId } };
    this.router.navigate(['tabs'], navigationExtras);
  }
}

Как только навигация завершится, свойство состояния переходит прочь (вроде - он сохраняется в свойстве history.state), поэтому в конструкторе tabs.page.ts возьмите переданные данные и присвойте их локальным переменным, как это

export class TabsPage implements OnInit {
  id: any;

  constructor(private router: Router) {
    const navigation = this.router.getCurrentNavigation();
    const state = navigation.extras.state;
    this.id = state.id;
  }
}

Вот где он не чувствует Совершенно верно ... В tabs.page.html добавьте событие click для всех ваших вкладок, вызывая функцию и передавая ей имя вкладки, как это

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" (click)="routeToTab('tab1')">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="routeToTab('tab2')">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" (click)="routeToTab('tab3')">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

В tabs.page.ts добавьте функцию, которая добавит состояние к NavigationExtras и маршрут к вкладке

routeToTab(tabRoute: string) {
    const navigationExtras: NavigationExtras = {
      state: { id: this.id }
    };
    this.router.navigate(['tabs/' + tabRoute], navigationExtras);
}

Наконец, в каждом из файлов компонентов вкладки добавьте в конструктор и извлеките данные, переданные объектом состояния

id: any;

constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state
  this.id = state.id;
}

Я думаю, что это так. Надеюсь, это поможет.