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

Question

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

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

如果是这样 - 似乎有很多重复代码？

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

Answer 1

更新:

就像@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 元素(由我们绑定(bind)到我们的自定义组件在 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;
    }
}