1

我试图让菜单汉堡按钮显示在工具栏中，而标题确实显示菜单按钮不显示，任何建议将不胜感激。

home page.html 的代码是

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
  <ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
  Dashboard
</ion-title>
</ion-toolbar>
</ion-header>

app.component.html 的代码是

<ion-app>
<ion-menu side="start" >
<ion-header>
<ion-toolbar>
  <ion-title>
    Menu
  </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
  <ion-item lines="none" routerLink="/landing">
    <ion-icon name="home-outline" slot="start">
      <ion-label>Home</ion-label>
    </ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="qr-code-outline" slot="start">
      <ion-label>QR Code</ion-label>
    </ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="search-outline" slot="start">
      <ion-label>Find a Tennis Partner</ion-label>
    </ion-icon>
  </ion-item>
  <ion-item>
    <ion-icon name="log-in-outline" slot="start">
      <ion-label>Volunteer Login</ion-label>
    </ion-icon>
  </ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-app>

不确定是否有任何其他页面相关，但如果是，可以在此处弹出。有一个登录页面，可将您带到此主页。谢谢

4

1 回答 1

0

试试这个代码

app.component.html

<ion-app>
  <ion-menu contentId="main-content">
    <ion-header mode="ios">
      <ion-toolbar color="primary">
        <ion-title>Company A</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list lines="none">
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item lines="none" class="menuitem">
            <ion-icon slot="start" [name]="p?.icon"></ion-icon>
            <ion-label>{{p?.title}}</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>
enter code here

app.component.ts

public pages: any = [{
    title: 'Home',
    icon: 'home',
    url: '/dashboard'
  }, {
    title: 'Profile',
    icon: 'person-circle',
    url: '/profile'
  }, {
    title: 'Announcement',
    icon: 'megaphone-outline',
    url: '/announcement'
  }, {
    title: 'Logout',
    icon: 'log-out',
    url: ''
  }];

Dashboard.html

<ion-header>
  <ion-toolbar mode="ios" color="carnation">
    <ion-buttons slot="start">
      <ion-menu-button color="white" auto-hide="true"></ion-menu-button>
    </ion-buttons>
    <ion-title mode="ios" color="white">Dashboard</ion-title>
  </ion-toolbar>
</ion-header>
于 2021-03-05T12:00:15.747 回答