ion-router-outlet 與 ion-header 重疊

Question

在我的 Ionic4/Angular 應用程序中，我將頁眉和頁腳放在它們自己的組件中，因為它們在每個頁面上都是相同的。 當我這樣做時， ion-router-outlet基本上忽略了標題， ion-content部分隱藏在標題后面。 當然，我可以在我的內容中添加一個 padding-top （編輯：實際上，這也不起作用，路由器插座總是使用完整的屏幕 - 為什么？），但我認為其他地方是錯誤的，這不是目的ion-content正是這個，足夠聰明才能注意到它需要多大？ 順便說一句，如果我在<ion-content>省略fullscreen ，那沒有什么區別。

主要應用組件：

<ion-app>
    <app-header></app-header>
    <ion-content fullscreen>
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
    <app-footer></app-footer>
</ion-app>

應用程序頭：

<ion-header>
    <h1>my header</h1>
</ion-header>

應用頁腳：

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="foo">
            <ion-label>Foo</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="bar">
            <ion-label>Bar</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

路線：

const routes: Routes = [
    {
        path: 'foo',
        loadChildren: './foo/foo.module#FooModule'
    },
    {
        path: 'bar',
        loadChildren: './bar/bar.module#BarModule'
    }
]

Answer 1

找到了解決辦法。 <ion-router-outlet></ion-router-outlet>基本上被忽略了，因為<ion-tabs>也充當路由器出口，並在完整視口上呈現其內容，只排除選項卡的空間-酒吧。 這就是<app-header>重疊的原因。

ion-tabs 組件沒有任何樣式，用作路由器插座以處理導航。

來源： https : //ionicframework.com/docs/api/tabs

這意味着我可以簡單地使用

<ion-app>
    <ion-tabs>
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="foo">
                <ion-label>Foo</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="bar">
                <ion-label>Bar</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>
</ion-app>

在主應用程序組件中，並將<app-header>放在各個選項卡中。

Header 是一個包含工具欄組件的父組件。 需要注意的是 ion-header 需要是頁面的三個根元素之一

來源： https : //ionicframework.com/docs/api/header

Answer 2

我不喜歡以下選項：

將<app-header>放在單獨的選項卡中

它阻止我在標題中做動畫，因​​為標題不斷被替換。 因此，我將以下類添加到 ion-tabs，並相應地更新了router-outlet ：

.with-header {
  height: auto;
  top: 47px;  // height of your app-header component
}

現在您只需使用：

<ion-app>
    <app-header></app-header>
    <ion-tabs class="with-header">
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="foo">
                <ion-label>Foo</ion-label>
            </ion-tab-button>
            <ion-tab-button tab="bar">
                <ion-label>Bar</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>
</ion-app>