当在离子路由器出口时，离子含量与离子头重叠

Question

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

<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 中打开一个新的（带/不带填充）