为什么我的菜单被我的页面内容隐藏了？离子 5答案

【问题标题】：why is my menu hidden by the content of my page? Ionic 5为什么我的菜单被我的页面内容隐藏了？离子 5
【发布时间】：2021-04-02 13:59:54
【问题描述】：

这是我第一次使用 ionic 5。所以我尝试在我的应用程序中添加侧边菜单。但是当我添加它时，它被我的页面内容隐藏了。我到处叫它。你有遇到同样的问题吗？

我的 app.component.html

    <ion-app>
      <ion-menu contentId="menu-content" menuId="menu-content" side="end">
        <ion-header>
          <ion-toolbar>
            <ion-title>Awesome avocado menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          Awesome avocado content
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="menu-content"></ion-router-outlet>
    </ion-app>
    
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button routerLinkActive="tab-selected" routerLink="/home" class="ios" tab="home">
          <ion-icon name="list-box"></ion-icon>
          <ion-label>Appointments</ion-label>
        </ion-tab-button>
    
        <ion-tab-button routerLinkActive="tab-selected" routerLink="/make-appointment" class="ios" tab="make-appointment">
          <ion-icon name="add-circle"></ion-icon>
          <ion-label>Book Appointment</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

在我的 home.html 中

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button  auto-hide="true" ></ion-menu-button>
    </ion-buttons>
 <ion-title>app-menu</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  Lorem Ipsum is simply dummy text of the
   printing and typesetting industry. Lorem Ipsum has been the 
  industry's standard dummy
</ion-content>

谢谢！

【问题讨论】：

标签： javascript angular ionic-framework ionic5

【解决方案1】：

它与您的页面内容重叠的原因是您将 <ion-tabs> 放置在 <ion-app> 之外。

App 是 Ionic 应用程序的容器元素。应该只有成为每个项目的一个元素。叠加层组件在出现时会附加到<ion-app>。

所以，将您的 ion-tabs 放在 ion-app 中。但更优化的方法是将您的 <ion-tabs> 放在单独的页面中，例如 home.component.html，因为 ion-tabs 也是其他页面（选项卡）的容器。从那里您可以创建打开选项卡的逻辑。

这个简单的教程会有所帮助：https://www.freakyjolly.com/ionic-tabs-bar-navigation-tutorial/#.X-Q0P9gzbIU

【讨论】：