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

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 是 Ionic 应用程序的容器元素。每个项目应该只有一个元素。覆盖组件<ion-app>在出现时会被附加到 。因此，将 ion-tabs 放入 ion-app 中。但更优化的方法是将其放置<ion-tabs>在单独的页面中，例如 home.component.html，因为 ion-tabs 也是其他页面（选项卡）的容器。从那里您可以创建打开选项卡的逻辑。