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

问题描述

在 Ionic 1 中，我们可以在 之上定义一个 ，它用作整个应用程序的通用导航栏，我们可以在每个视图的基础上将其关闭(使用 ionNavView 的 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:

无法创建全局离子导航栏，因为这是在目的.为每个组件定义导航栏的要点是我们可以正确地为标题、导航栏背景颜色设置动画(如果您更改它们)并为所需的其他属性设置动画.

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 内容投影的错误作品.当人们尝试这个时，我们有几个问题已经公开并且最好的答案是不要这样做.

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.

<小时>

不推荐的解决方案:

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

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

使用以下代码创建一个 navbar.html:

Create a navbar.html with this code:

<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，您可以决定哪些页面显示该按钮，哪些不应该显示可见.所以通过这种方式，你可以发送信息告诉组件它应该如何，并为每个页面定制它.

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.

所以如果你想在页面中添加导航栏(不修改默认模板，所以显示创建按钮)你只需要添加 navbar 元素(由我们绑定到我们的自定义组件在 selector 属性中):

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 - 应用程序的全局导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！