Question

在Ionic4 / Angular应用程序中，我将页眉和页脚放在各自的组件中，因为它们在每个页面上都相同。当我这样做时，ion-router-outlet基本上会忽略标题，而ion-content部分隐藏在标题后面。 ~~当然，我可以在内容中添加padding-top~~ （编辑：实际上，这也行不通，router-outlet始终使用完整的屏幕-为什么？），但是我认为其他地方是错误的，ion-content的目的不是很聪明，足以注意到它需要多大吗？顺便说一句，如果我在fullscreen中省略了<ion-content>并没有什么不同。

主要应用程序组件：

<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>放在各个标签中。

页眉是保存工具栏组件的父组件。它的重要的是要注意离子头必须是这三种之一页面的根元素

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

Answer 2

我不喜欢以下选项：

将<app-header>放置在单个标签中

由于标题不断被替换，因此它使我无法在标题中执行动画。因此，我将以下类添加到了离子标签中，并适当地更新了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>

离子头出口与离子头重叠

2 个答案: