Ionic 2 - 应用程序的全局导航栏

Question

在 Ionic 1 中，我们可以在 <ion-nav-view> 之上定义一个 <ion-nav-bar>，作为整个应用程序的通用导航栏，我们可以将其关闭查看基础（使用 ionNavView 的 hideNavBar=true|false.

在 Ionic 2 中，我们必须在每个页面中插入一个 <ion-nav-bar> - 并且不能为整个应用程序设置全局导航栏。这是正确的，还是我错过了一个技巧？

如果是这样 - 好像有很多重复代码？

此外，您似乎没有能力让 NavBar 构建自己的后退按钮，您必须自己（每页）为后退按钮编写自己的标记，这又一次看起来像很多代码重复。

Answer 1

后来我发现这是不可能的。实现此目的的唯一方法是提供一个 <ion-navbar>，它将自动处理后退按钮。

例如：

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>

  <ion-title>Settings</ion-title>
</ion-navbar>

<ion-content padding class="hub-settings">
  <!-- content here -->
</ion-content>

Answer 2

更新:

就像@mhartington 说的那样：

There is no way to create a global ion-navbar, as this is done on purpose. The point of having a navbar defined for each component is so that we can properly animate the titles, navbar background color (if you change them) and animate other properties needed.

关于创建自定义指令以避免重复 ion-navbar html 代码：

That will still creat errors with how angular2 content projection works. We have several issues that have been open when people try this and the best answer is to not do it.

不推荐的解决方案：

为了避免重复这么多代码，您可以为导航栏创建自己的自定义组件。

使用以下代码创建 navbar.html：

<ion-navbar *navbar>
  <ion-title>MyApp</ion-title>
  <button  menuToggle="right" end>
    <ion-icon name="menu"></ion-icon>
  </button>

  <ion-buttons *ngIf="!hideCreateButton" end>
    <button (click)="createNew()"><ion-icon name="add"></ion-icon></button>
  </ion-buttons>
</ion-navbar>

然后在navbar.ts:

import {Component, Input} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CreateNewPage} from '../../pages/create-new/create-new';

@Component({
    selector: 'navbar',
    templateUrl: 'build/components/navbar/navbar.html',
    inputs: ['hideCreateButton']
})
export class CustomNavbar {

    public hideCreateButton: string;

    constructor(private nav: NavController) {
    }

    createNew(): void {
        this.nav.setRoot(CreateNewPage, {}, { animate: true, direction: 'forward' });
    }
}

通过将 hideCreateButton 声明为 Component 的 input，您可以决定在哪些页面中显示该按钮以及在哪些页面中不可见。所以通过这种方式，你可以发送信息告诉组件它应该如何，并为每个页面定制它。

所以如果你想在页面中添加导航栏（不修改默认模板，所以显示创建按钮）你只需要添加 navbar 元素（我们在selector 属性):

<navbar></navbar>

<ion-content>
  ...
</ion-content>

如果您想隐藏创建按钮（或根据需要修改导航栏），您的页面将如下所示：

<navbar [hideCreateButton]="hidebutton()"></navbar>

<ion-content>
   ...
</ion-content>

请记住，hideButton() 应该像这样在 customPage.ts 中定义：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from '@angular/common';

@Component({
  templateUrl: 'build/pages/create-new/create-new.html',
  directives: [FORM_DIRECTIVES]
})
export class CreateNewPage{

    private hideCreateButton: boolean = true;

    public hidebutton(): boolean {
        return this.hideCreateButton;
    }
}

Answer 3

对于离子 3+

我解决这个问题的方法就是使用自定义组件。

ionic generate component navbar

将相关的导航栏 html 添加到您的组件模板中
向您的组件 .ts 文件添加任何其他功能
将您的选择器修改为相关的东西，（如果在它上面使用命令应该默认为 'navbar'.
同时将组件添加到您的 app.module.ts 声明中

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

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

Answer 4

我在创建 Ionic 4+ 应用程序 (@ionic/angular 4.6.2) 时遇到了类似的问题，我想在 header 中添加一个登录按钮和一些其他全局内容。

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

只需在 [=50 中添加包含 ion-toolbar 的 ion-header =] 作为全局 header，像这样：

<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>

这里的问题是，如果您只这样做，"global header" 将覆盖任何页面的内容。因此，有一个解决方法，只需在内容之前的所有页面顶部添加一个包含空 ion-toolbar 的空 ion-header标签，如下：

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

这样做 "global header" 将覆盖页面 header 并且内容将紧随其后。

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

我想如果主 header 的高度大于 "standard" 工具栏的高度，我想可能会有一些奇怪的行为，但如果有一些不错的 CSS 你应该可以修复它.

此外，此解决方法适用于侧边菜单。

希望对您有所帮助！

Ionic 2 - 应用程序的全局导航栏

Ionic 2 - global NavBar for the app

angular

typescript

ionic-framework

ionic2

ionic3