ion-content 在 ion-router-outlet 中与 ion-header 重叠

Question

我正在使用最新版本的 ionic4(rc0)，我正在尝试在根目录的 app.component.ts 中创建我的 <ion-header>。

<ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>
          <img src="assets/atippr_logo.svg" class="atippr-header"/>
        </ion-title>

      </ion-toolbar>
    </ion-header>

    <ion-menu side="start">

      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-item ion-item menuClose="start" href="/dashboard">
            <ion-icon name="apps" item-left></ion-icon>
            Dashboard
          </ion-item>
        </ion-list>
      </ion-content>

    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>
</ion-app>

稍后我想在我的路由页面中设置我的 <ion-content>。

<ion-content>
  Login
</ion-content>

但现在我页面的内容总是与 app.component.ts 中的 header 重叠当我在 ionic3 中没有记错时，有一个标签添加 hasHeader="true" 但没有效果。

有人能帮帮我吗？

Answer 1

不知道它是否仍然相关，但我遇到了同样的问题并找到了解决它的结构：

<ion-app>
  <ion-header>
    <ion-toolbar>    
      <ion-title>Header</ion-title>
    </ion-toolbar>     
  </ion-header>
  <ion-content >
   <ion-router-outlet >
   </ion-router-outlet>
  </ion-content>
  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
</ion-app>

另外不要忘记在你的组件中打开一个新的（with/without 填充）html

ion-content 在 ion-router-outlet 中与 ion-header 重叠

ion-content overlaps with ion-header when in ion-router-outlet

ionic-framework

angular

ionic4