ionic-framework - ion-header 与 ion-content 重叠 | ionic 3

Question

到目前为止，我有一个非常简单的应用程序，但我不知道如何修复内容的重叠(内容顶部的标题)。我创建了一个组件 header顾名思义，它包含标题。

header.html

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

我一直试图在不同的页面上使用它，但它总是与页面的内容重叠。

page.html

<app-header></app-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>

我试过使用 div标签而不是 ion-content ，还尝试使用 class="has-header" ，但似乎没有任何效果。虽然，如果不使用 header作为如下所示的组件，它工作正常。但我想使用 header作为一个组件，以便我可以在其他页面上重用它。

page.html(不想这样)

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            Some Title
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h1>Some Page</h1>
</ion-content>

Answer 1

正如 this thread 中所指出的在 Ionic 团队的 @brandyshea 的 Ionic 官方论坛上，问题是在一个页面中，您只能有 3 种标签作为顶级标签，其他所有内容都必须在其中之一中。这3个标签是:

<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>

我试图将我的应用程序组织为@Hafiz 并偶然发现了同样的问题，解决方案是将我的自定义标题( <ew-navigazione-top> )放在 <ion-header> 中在每一页。

<ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>

附言这是 Ionic 3 的解决方案。 对于以前的版本 在同一个链接线程上，您可以找到其他特定的解决方案。