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

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 也是其他页面（选项卡）的容器。从那里您可以创建打开选项卡的逻辑。