底部的Ionic 3静态菜单，不使用Tabs组件或Custom组件

Question

我正在使用Ionic 3构建一个Android应用程序。我有一个要求，请在此发布您的建议。

我需要在所有屏幕的屏幕底部（类似于Tabs组件）设置静态菜单。我知道我可以创建一个自定义组件并将其放在所有html模板中。但是当我使用自定义组件时，它会在每个页面加载时重新加载，因为它位于每个html模板中。我不想在每次加载页面时重新加载菜单。它应该在所有页面之外是静态的。只应根据菜单点击加载页面。

此要求类似于Tabs组件。我尝试过Tabs组件，但问题是我不能按照我的要求设计Tabs布局，自定义按钮和带有其他内容的图像以及菜单按钮。

请发布您的建议以克服此问题。提前谢谢。

Answer 1

如果您使用的是Ionic NavController（默认设置），则<ion-nav>

中会有App.component.html个标记

ion-nav将使用您声明的root组件替换其内容 - 以及使用NavController在NavStack上推送的任何内容

最简单的解决方案是将自定义组件放在标签内：

///app.component.html
<ion-nav root=[rootPage]></ion-nav>
<ion-footer>
    <your-custom-menu></your-custom-menu>
</ion-footer>

（离子页脚只是让它粘到底部）

如果你在离子导航标签旁边放了一些东西，那么当你导航时，它将在导航堆栈之外没有被替换

请注意，如果您计划使用离子ModalControlelr中的模式，那么这些模式可以位于App.component之上并隐藏它。

在此处阅读ion-nav和ion-tabs：https://ionicframework.com/docs/api/navigation/NavController/

Answer 2

也许可以通过页脚或某些技巧工作

https://forum.ionicframework.com/t/show-tabs-menu-bar-in-all-page-if-click-on-side-menu-then-tabs-menu-bar-is-not-visible-in-all-pages/101242/7?u=timsar

将所有页面从幻灯片菜单添加到标签页 并且对于您不想显示其图标选项卡的页面使用* ngfor和show =“false” 并在你的app.component.ts而不是使用this.nav.setRoot（mypage）; 使用某些功能从像离子论坛中的链接这样的标签加载你的页面。