Блог

Главная - Вопросы по программированию - Не удается заставить вкладку работать как 2 страницы в Ionic 4

Не удается заставить вкладку работать как 2 страницы в Ionic 4

#angular #ionic-framework #angular-routing #ionic4

#angular #ionic-framework #angular-маршрутизация #ionic4

Вопрос:

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

Это мои вкладки.router.module.ts:

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { AuthenticationGuard } from '../guards/authentication.guard';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        canActivate: [AuthenticationGuard],
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab2/:id',
        canActivate: [AuthenticationGuard],
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'acceptchallenge',
        children: [
          {
            path: '',
            loadChildren: '../acceptchallenge/acceptchallenge.module#AcceptchallengePageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          },
          {
            path: '/login',
            loadChildren: '../login/login.module#LoginPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

Я хочу, чтобы tab3 открывал страницу входа, когда пользователь не входит в систему, и когда пользователь входит в систему, открывал страницу учетной записи.

Поэтому я должен добавить что-либо canActivate , чтобы это сработало.

Любая помощь очень ценится.

Комментарии:

1. Я бы предложил создать страницу входа в систему и после аутентификации перейти непосредственно к вашей структуре вкладок, установив страницу учетной записи как root.

2. @JayOrdway. У меня есть страница входа, и после аутентификации она перенаправляется на страницу вкладок, но проблема в том, что когда пользователь открывает страницу входа, кнопки «Назад» там нет? Итак, вы можете мне с этим помочь?

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

4. @Najamussaqib. Да, это происходит. Когда пользователь не входит в систему, он может посетить страницу входа, а когда пользователь входит в систему, он не может посетить страницу входа, но я хочу показать страницу входа в tab3 и страницу учетной записи также в tab3.

Ответ №1:

Внутри вашего tabs.html вы можете использовать * ngIf для отображения вкладок при входе пользователя в систему или выходе из системы. Возьмите bool или любую другую логику, которую вы можете использовать, и покажите ее на своей странице вкладок вот так.

 <ion-tab-bar slot="bottom">
    <ion-tab-button tab="profile" *ngIf="userLogin == true">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="login"  *ngIf="userLogin == false">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Login</ion-label>
    </ion-tab-button>
</ion-tab-bar>