如何防止 ion-router-outlet 覆盖 ion-grid 并扩展到整个页面

Question

这是关于 angular-ionic 项目的 UI 问题。 有 1 个组件登录。

在 app.component.html 内部，有一个包含ion-grid元素的ion-content容器。 里面有2行。 第一行包装一个ion-toolbar 。 第二行包裹一个ion-router-outlet 。 如下所示：

<ion-content>
    <ion-grid>
        <ion-row><ion-toolbar>
            <ion-buttons slot="start">
            <ion-menu-button autoHide="false"></ion-menu-button>
            </ion-buttons>
            <ion-title>Title</ion-title>
        </ion-toolbar></ion-row>
        <!-- nav bar is the menu, menu is the nav bar -->
        <app-nav-bar></app-nav-bar>
        <ion-row><ion-router-outlet id="menuContent"></ion-router-outlet></ion-row>
    </ion-grid>
</ion-content>

最终，路由器将路由到包含 html 文件的登录组件，该文件还具有一个ion-content包装一个ion-grid包装一个ion-segment元素。

<ion-content>
  <ion-grid>
    <ion-segment >
      <ion-segment-button ><ion-label>Login</ion-label></ion-segment-button>
      <ion-segment-button ><ion-label>New Password</ion-label></ion-segment-button>
    </ion-segment>
    <form>...</form>
    </ion-grid>
</ion-content>

在我的预期中，出口内容应该位于工具栏下方。 然而现实是出口扩展并被工具栏重叠，挡住了段元素的视图。 我做错了什么使工具栏与 routeroutlet 内容重叠，我该如何防止这种情况发生？ 现在我正在尝试解决网格、行和列的问题。 但我最终是否需要触及原生 css 文件？

Answer 1

我找到了答案，删除行和列，因为它什么都不做。 添加 ion-app 元素，将工具栏和路由器插座放在一个 div 中，class 是“ion-page”。 这是答案。

<ion-app>
    <!-- menu component -->
    <app-nav-bar></app-nav-bar>
    <div class="ion-page" id="menuContent">
            <!-- This tool bar menu button is the reason ion-menu works -->
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-menu-button autoHide="false"></ion-menu-button>
                </ion-buttons>
                <!-- use thumbnail instead of ion-img, because ionic will break line somehow, praise ionic -->
                <ion-title>Title</ion-title>
            </ion-toolbar>
        <ion-content><ion-router-outlet id="menuContent"></ion-router-outlet></ion-content>
    </div>
</ion-app>