我想在离子应用程序上显示一个菜单模板,但我想首先是一个登录页面,然后,当用户登录时,显示离子模板。
现在我在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>
如何在登录页面中添加菜单?
1条答案
按热度按时间6mw9ycah1#
我不确定你的目标是什么,但是如果你只是想显示一个图标菜单,那么你可以在登录后的下一页添加它。
它介于
如果您想在登录页面中显示菜单,请使用 *ngIf. userlogin:Boolean = false执行登录并将userlogin设置为true。