Ionic 未显示已记录页面的离子菜单

vs3odd8k  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(135)

我想在离子应用程序上显示一个菜单模板,但我想首先是一个登录页面,然后,当用户登录时,显示离子模板。
现在我在app.routing.模块中,如果用户未登录,应用程序将重定向到loginPage,如果用户已登录,则重定向到页面路由模块,其中有许多页面,如主页'' = '/home':App.routing.module

const routes: Routes = [
   { path: '', 
    loadChildren: () => import('./pages/pages.module').then( m => m.PagesPageModule),
    ...canActivate(redirectUnauthorizedToLogin)
   },
   {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule),
    ...canActivate(redirectLoggedInToHome)
   },
];

pages-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule),
    ...canActivate(redirectUnauthorizedToLogin)
  },
  {
    path: 'appointments',
    loadChildren: () => import('./appointments/appointments.module').then(m => m.AppointmentsPageModule),
    ...canActivate(redirectUnauthorizedToLogin)
  },
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersPageModule),
    ...canActivate(redirectUnauthorizedToLogin)
  },
];

应用程序组件:

<ion-app>
 <!-- Content -->
 <ion-router-outlet id="app"></ion-router-outlet>
 <!-- !Content -->
</ion-app>

登录页面:

<div class="login">
 <ion-card>
  <ion-card-content>
   <form [formGroup]="loginForm" (ngSubmit)="login()">
    <!-- Email -->
    <app-base-input label="email.label" [control]="email" errorMessage="email.notValid" formControlName="email">
    </app-base-input>
    <!-- Password -->
    <app-base-input type="password" label="password.label" [control]="password" errorMessage="password.notValid"
      formControlName="password"></app-base-input>
    <!-- Button -->
    <ion-button expand="full" type="submit">{{ 'login.label' | translate }}</ion-button>
   </form>
  </ion-card-content>
 </ion-card>
</div>

我包括了page.component.html上的菜单,它里面有页面,但没有显示菜单。

<!-- Menu -->
<ion-menu contentId="main-content" type="overlay">
 <ion-content>
  <ion-list id="inbox-list">
   <ion-list-header>{{ 'appName' | translate }}</ion-list-header>
  <ion-note>hi@ionicframework.com</ion-note>

  <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
    <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
      <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-outline'"></ion-icon>
      <ion-label>{{ p.title | translate }}</ion-label>
    </ion-item>
   </ion-menu-toggle>
  </ion-list>
 </ion-content>
</ion-menu>
<!-- !Menu -->

<ion-router-outlet id="main-content"></ion-router-outlet>

如何在登录页面中添加菜单?

6mw9ycah

6mw9ycah1#

我不确定你的目标是什么,但是如果你只是想显示一个图标菜单,那么你可以在登录后的下一页添加它。

<ion-menu side="start" menuId="first" contentId="main">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-menu-button autoHide="true"></ion-menu-button>
      </ion-buttons>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>

      <ion-item>
        <ion-button routerLink="/appointment" fill="clear">Appointments</ion-button>
      </ion-item>
      <ion-item>
        <ion-button routerLink="/customer" fill="clear">Customer</ion-button>
      </ion-item>

    </ion-list>
  </ion-content>

  <ion-footer>
    <ion-item>
      <ion-button fill="clear" (click)="signOut()">Abmelden</ion-button>
    </ion-item>
  </ion-footer>
</ion-menu>

它介于

<ion-header></ion-header>

//ion-menu here!

<ion-content></ion-content>

如果您想在登录页面中显示菜单,请使用 *ngIf. userlogin:Boolean = false执行登录并将userlogin设置为true。

相关问题