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

Question

这是我第一次使用 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>

谢谢！

Answer 1

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

App is a container element for an Ionic application. There should only be one element per project. The overlay components get appended to the <ion-app> when they are presented.

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

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

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

why is my menu hidden by the content of my page? Ionic 5

javascript

angular

ionic-framework

ionic5