Ionic 2 - 应用程序的全局NavBar [英] Ionic 2 - global NavBar for the app

问题描述

在Ionic 1中，我们可以在< ion-nav-view>上方定义< ion-nav-bar> ; ，作为整个应用程序的通用导航栏，我们可以在每个视图的基础上关闭它（使用 ionNavView 's hideNavBar = true | false 。

In Ionic 1, we have the ability to define an <ion-nav-bar> above an <ion-nav-view>, which serves as a generic nav bar for the entire app and we could turn it off on a per-view basis (using ionNavView's hideNavBar=true|false.

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

It appears in Ionic 2 we have to insert an <ion-nav-bar> per page - and cannot have a global nav bar for the entire app. Is that correct, or am I missing a trick?

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

If so - it seems like a lot of duplicated code?

此外，您似乎无法让NavBar自行构建后退按钮，你必须自己为后退按钮编写自己的标记（每页），这似乎是很多代码重复。

Also, it appears you do not have the ability for the NavBar to build its own back button, and you have to write the own mark-up for the back button yourself (per page) which, again, seems like a lot of code duplicate.

推荐答案

更新：

就像@mhartington所说：

Just like @mhartington says:

无法创建全局ion-navbar ，因为这是在
目的上完成的。为每个组件定义导航栏的重点是
，我们可以正确设置标题，导航栏背景颜色（如果
更改它们）并为其他属性设置动画。

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代码：

And about creating a custom directive to avoid duplicating ion-navbar html code:

这仍然会产生有关angular2内容投影
如何工作的错误。我们有几个问题在人们尝试这个
时已经打开，而最好的答案就是不这样做。

---

不推荐解决方案：

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

In order to avoid duplicating so much code, you can create your own custom component for the navbar.

使用以下代码创建 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 作为组件的输入，您可以决定哪些页面显示该按钮哪些不应该是可见的。因此，通过这种方式，您可以发送信息告诉组件应该如何，并为每个页面自定义它。

By declaring the hideCreateButton as an input of the Component, you can decide in which pages show that button and in which ones should not be visible. So in this way, you can send information to tell the component how it should be, and customize it for each page.

因此，如果您想要添加导航栏页面（不修改默认模板，因此显示创建按钮）您只需添加导航栏元素（由我们绑定到我们的自定义组件选择器属性）：

So if you want to add the navbar in a page (without modifying the default template, so showing the create button) you just have to add the navbar element (binded to our custom component by us in the selector property):

<navbar></navbar>

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

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

And if you want to hide the create button (or modify you navbar like you want to) your page will look like this one:

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

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

请记住 hideButton（）应该在你的 customPage.ts 中定义如下：

And remember that the hideButton() should be defined in your customPage.ts like this:

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

这篇关于Ionic 2 - 应用程序的全局NavBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！