在 ion-router-outlet 中，ion-content 与 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 的标题重叠 当我在 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>

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