时间戳

首页 > 解决方案 > ion-router-outlet 与 ion-header 重叠

angular - ion-router-outlet 与 ion-header 重叠

问题描述

在我的 Ionic4/Angular 应用程序中，我将页眉和页脚放在它们自己的组件中，因为它们在每个页面上都是相同的。当我这样做时，ion-router-outlet基本上忽略了标题，并且ion-content部分隐藏在标题后面。当然我可以在我的内容中添加一个 padding-top（编辑：实际上，这也不起作用，路由器插座总是使用完整的屏幕 - 为什么？），但我认为还有其他问题，不是目的正是这个ion-content，足够聪明地注意到它需要多大？顺便说一句，如果我省略fullscreenin并没有什么不同<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'
    }
]

标签： angularionic-frameworklayoutionic4

解决方案

找到了解决方案。<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

推荐阅读