ion-router-outlet 与 ion-header 重叠

Question

在我的 Ionic4/Angular 应用程序中，我将 header 和页脚放在它们自己的组件中，因为它们在每个页面上都是相同的。当我这样做时，ion-router-outlet 基本上忽略了 header，并且 ion-content 部分隐藏在 header 后面。 ~~当然我可以在我的内容中添加一个 padding-top~~（编辑：实际上，这也行不通，router-outlet 总是使用完整的屏幕 - 为什么？），但我认为还有其他地方不对劲，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>

app-header:

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

app-footer:

<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> 也充当 router-outlet 并在完整视口上呈现其内容，只排除 tab-bar 的 space。这就是 <app-header> 重叠的原因。

The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation.

来源：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 is a parent component that holds the toolbar component. It's important to note that ion-header needs to be the one of the three root elements of a page

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

Answer 2

我不喜欢以下选项：

place the <app-header> in the individual tab

它阻止我在页眉中制作动画，因为页眉经常被替换。因此，我将以下 class 添加到 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>

ion-router-outlet 与 ion-header 重叠

ion-router-outlet is overlapped by ion-header

layout

ionic-framework

angular

ionic4