在離子路由器出口中時，離子含量與離子接頭重疊

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 中打開一個新的（帶/不帶填充）

Answer 2

試過你給內容課“has-header”？

<ion-content class="has-header">