如何防止 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>