Ionic 4 как переходить со страницы вкладки на страницу без вкладки, сохраняя вкладку?

В Ionic 4 у меня есть приложение с вкладками (5 страниц «Главная», «Поиск», «Карта», «Информация», «Тариф»). Со страницы «Поиск» я перехожу на страницу «Подробная информация», но я хочу сохранить меню вкладок на странице «Подробная информация». Не знаю, возможно ли?

Как настроить маршрут? Это мой: app-routing.module.ts

`const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'map', loadChildren: './map/map.module#MapPageModule' },
  { path: 'search', loadChildren: './search/search.module#SearchPageModule' },
  { path: 'station', loadChildren: './station/station.module#StationPageModule' },
  { path: 'info', loadChildren: './info/info.module#InfoPageModule' },
  { path: 'tarif', loadChildren: './tarif/tarif.module#TarifPageModule' }
];`

and my `tabs.router.module.ts`

`const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'search',
        outlet: 'search',
        component: SearchPage
      },
      {
        path: 'map',
        outlet: 'map',
        component: MapPage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'tarif',
        outlet: 'tarif',
        component: TarifPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];`

The station page must be a child page of Search page ?

ionic-framework tabs ionic4
person anthony riff    schedule 07.08.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы делаете это, используя этот параметр в app.module.ts файле.

IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: false
})
person Paresh Gami    schedule 07.08.2018
comment
мне кажется, что в ionic 4 такой опции нет - person anthony riff; 09.08.2018

arrow_upward
0
arrow_downward

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

Таким образом, вы можете сделать это, как показано ниже, чтобы разместить подробное представление в том же разделе вкладки «Поиск».

this.navCtrl.push(DetailPage, { detailId: detailData.id });

сделав это, вы можете переместить свою страницу сведений на ту же страницу вкладки.

Надеюсь, это поможет!

person CodeChanger    schedule 07.08.2018

arrow_upward
0
arrow_downward

Вы должны сделать страницу сведений дочерней по отношению к маршрутам «вкладок». Это работает без отображения значка для этой страницы на панели значков вкладки.

Добавьте запись в массив "children" в tabs.router.module.ts:

 {
    path: 'detail',
    children: [
      {
        path: '',
        loadChildren: '../detail/detail.module#DetailPageModule'
      }
    ]
 },

Затем вы можете перейти к /tabs/detail, например, с помощью ионной кнопки или аналогичного элемента [routerLink]="['/tabs/detail']".

Если хотите, вы также можете определить маршрут перенаправления в своем app-routing.module.ts:

 { path: 'detail', redirectTo: '/tabs/detail' }

Недостатком этого решения является то, что значок панели вкладок на странице «Поиск» не будет окрашен, когда отображается страница «Подробности». Но это может быть решено дополнительным форматированием CSS.

person Alexander Schmitt    schedule 10.05.2019