Ionic 2-应用程式的全球NavBar

Question

在Ionic 1中，我们可以定义<ion-nav-bar>上方的<ion-nav-view>，用作整个应用程序的通用导航栏，我们可以按视图将其关闭（使用ionNavView的）hideNavBar=true|false。它出现在Ionic 2中，我们必须<ion-nav-bar>每页插入一个-不能在整个应用程序中使用全局导航栏。是正确的，还是我错过了一个把戏？如果是这样-似乎有很多重复的代码？另外，您似乎没有能力让NavBar构建自己的后退按钮，并且您必须自己为后退按钮编写标记（每页），这又像是很多重复的代码。

Answer 1

对于离子3+

我要做的只是使用自定义组件。

ionic generate component navbar

• 将相关的导航栏html添加到您的组件模板中

• 将任何其他功能添加到组件.ts文件

• 将您的选择器修改为相关的内容（如果使用上面的命令，则应将其默认为“ navbar”。

• 还将组件添加到您的app.module.ts声明中

然后，在任何页面模板中，只需将其用作自定义元素即可，例如

<navbar></navbar><ion-content padding>
   ...</ion-content/>

Answer 2

创建Ionic 4+应用程序（@ ionic / angular 4.6.2）时遇到了类似的问题，我想在标题中添加一个登录按钮和一些其他全局性的东西。

您可以通过非常简单的方式来实现。

只需在app.component.html中添加包含离子工具栏的离子头作为全局头，如下所示：

<ion-header class="page-header">
   <ion-toolbar id="main-toolbar">
      <ion-title>
        <ion-label>{{ pageTitle }}</ion-label>
      </ion-title>
      <!-- add here all the things you need in your header --> 
   </ion-toolbar></ion-header><ion-router-outlet id="content" main></ion-router-outlet>

这里的问题是，如果仅这样做，“全局标题”将覆盖任何页面的内容。因此，有一种解决方法，只需在内容标签之前的所有页面顶部添加一个包含一个空离子工具栏的空离子头，如下所示：

<ion-header>
  <ion-toolbar></ion-toolbar></ion-header><ion-content>
  <!-- your content here --></ion-content>

这样做，“全局标题”将覆盖页面标题，并且内容将在页面标题之后立即开始。

然后，您可以在app.component.ts文件中管理全局头控件的所有代码。

我猜如果主标题的高度大于“标准”工具栏的高度，可能会有一些奇怪的行为，但是使用一些不错的CSS，您应该可以修复它。

此外，此变通办法与侧面菜单配合使用也很好。

希望能帮助到你！