在离子路由器出口时，离子内容与离子表头重叠
提问于 2018-12-16 13:43:16
我正在使用最新版本的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“，但没有效果。
有人能帮我吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-07 10:11:09
不知道它是否仍然相关，但我有相同的问题，并找到了这个结构来解决它：
<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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53802739
复制
腾讯云开发者
