Question

我是Ionic的新手，并且ive在移动混合应用程序中工作，我按照本教程https://ionicacademy.com/ionic-side-menu-with-sub-items/的有关如何使用子菜单项创建Ionic 4侧面菜单的操作。我现在遇到的问题是，例如，如果我执行Ionic Serve Command，侧面菜单按钮就不会显示在第一个节目中，它没有显示在几个论坛中阅读过的有关auto-hide =“ false”的菜单按钮和persistent =“ true”，但首次尝试仍未显示。

Example of the Menu

您可以在上方的图像中看到，左侧图像是页面的第一个显示，右侧图像是刷新页面时的图像。

根据教程，这是我的Menu.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.page.html',
  styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {

  pages = [
    {
      title: 'Home',
      url: '/menu/main',
      icon: 'home'
    },
    {
      title: 'Menu',
      children: [
        {
          title: 'Premios',
          url: '/menu/premios',
          icon: 'gift'
        },
        {
          title: 'Canje de Puntos',
          url: '/menu/canjepuntos',
          icon: 'cash'
        },
        {
          title: 'Consulta de Puntos',
          url: '/menu/puntos',
          icon: 'card'
        },
        {
          title: 'Historial de Compras',
          url: '/menu/historial',
          icon: 'cart'
        },
        {
          title: 'Premios Reclamados',
          url: '/menu/premiosreclamados',
          icon: 'calendar'
        },
        {
          title: 'Contactanos',
          url: '/menu/contactanos',
          icon: 'mail'
        }
      ]
    }
  ];

  constructor() { }

  ngOnInit() {
  }

}

菜单模块ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MenuPage } from './menu.page';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/menu/main',
    pathMatch: 'full'
  },
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'main',
        loadChildren: '../main/main.module#MainPageModule'
      },
      {
        path: 'premios',
        loadChildren: '../premios/premios.module#PremiosPageModule'
      },
      {
        path: 'canjepuntos',
        loadChildren: '../canjepuntos/canjepuntos.module#CanjepuntosPageModule'
      },
      {
        path: 'puntos',
        loadChildren: '../puntos/puntos.module#PuntosPageModule'
      },
      {
        path: 'historial',
        loadChildren: '../historial/historial.module#HistorialPageModule'
      },
      {
        path: 'premiosreclamados',
        loadChildren: '../premiosreclamados/premiosreclamados.module#PremiosreclamadosPageModule'
      },
      {
        path: 'contactanos',
        loadChildren: '../contactanos/contactanos.module#ContactanosPageModule'
      },
      { path: 'premio',
       loadChildren: '../premio/premio.module#PremioPageModule' },
      { path: 'premio-single', 
       loadChildren: '../premio-single/premio-single.module#PremioSinglePageModule' },
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ MenuPage ]
})
export class MenuPageModule { }

我的菜单模板：

<ion-menu contentId="content" auto-hide="false" persistent="true" >
  <ion-header>
    <ion-toolbar color="dark">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <div *ngFor="let p of pages">

      <!-- Standard Menu Item -->
      <ion-menu-toggle *ngIf="p.url">
        <ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
          <ion-icon [name]="p.icon" slot="start"></ion-icon>
          <ion-label>
            {{ p.title }}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
      <!-- Item with Children -->

      <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open" detail="false">
        <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
        <ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
        <ion-label>{{ p.title }}</ion-label>
      </ion-item>

      <!-- Children List for clicked Item -->
      <ion-list *ngIf="p.open">
        <ion-menu-toggle>
          <ion-item *ngFor="let sub of p.children" class="sub-item" [routerLink]="sub.url" routerDirection="root"
            routerLinkActive="active">
            <ion-icon [name]="sub.icon" slot="start"></ion-icon>
            <ion-label>
              {{ sub.title }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>

    </div>
  </ion-content>

</ion-menu>

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

这是我要显示菜单的主页（只有已登录的用户才能看到它）。

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="end" name="barcode"></ion-icon>        
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <div class="welcomeTextDiv">
        <h1 class="welcomeText">BIENVENIDO</h1><br><br>
      </div>
      <h5 style="font-size: 25px; margin: auto; color: red !important; text-transform: uppercase; text-align: center" class="errorMessage">
        {{ error }}
      </h5> 
      <div class="userDiv">
        <h2 class="userText">{{ cliente }}</h2>
      </div>
      <div class="messageDiv">
        <h2 class="messageText">Felicidades has ganado {{ points }} puntos</h2>
      </div>
</ion-content>

我已经阅读了整个教程，但对我来说似乎不起作用，您的帮助将不胜感激。

Answer 1

使用

<ion-menu-button autoHide="false"></ion-menu-button>

代替

<ion-menu-button></ion-menu-button>

Answer 2

以上内容都不适合我，有点hack，但我发现的最佳解决方案是成功获取令牌，而不是像往常一样继续加载我的应用程序， window.location.reload（）

这使应用程序退回，然后使用存储菜单中的令牌通过工作菜单加载该应用程序。

如何修复侧面菜单按钮在首次登录时不显示

2 个答案: