Ionic 在离子路由器出口时，离子含量与离子集管重叠

bzzcjhmw 于 2023-06-04 发布在 Ionic

关注(0)|答案(2)|浏览(158)

我使用的是最新版本的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”但没有效果。
有人能帮我吗？

ionic-framework

来源：https://stackoverflow.com/questions/53802739/ion-content-overlaps-with-ion-header-when-in-ion-router-outlet

2条答案

按热度按时间

aydmsdu91#

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

<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

赞(0）回复(0）举报 2023-06-04

nzk0hqpo2#

@ionic/react 7的问题
另一种可接受的解决方案是将IonRouterOutlet移动到IonApp上方：

<IonReactRouter history={history}>
  <IonRouterOutlet>
    <IonApp>
      <Provider store={store}>
        <Route exact path="/signin" component={SignInPage} />
      </Provider>
    </IonApp>
  </IonRouterOutlet>
</IonReactRouter>

赞(0）回复(0）举报 2023-06-04

我来回答

Ionic 在离子路由器出口时，离子含量与离子集管重叠

2条答案

相关问题

热门标签

最新问答