Ionic 2 - 应用程序的全局NavBar

Question

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

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

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

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

Answer 1

更新:

就像@mhartington说:

没有办法创建全局离子导航栏,因为这是故意的.为每个组件定义导航栏的重点是,我们可以正确设置标题,导航栏背景颜色(如果您更改它们)并为所需的其他属性设置动画.

关于创建自定义指令以避免重复ion-navbarhtml代码:

这仍然会产生angular2内容投影如何工作的错误.当人们尝试这个时,我们有几个问题已经公开,最好的答案就是不做.

不推荐解决方案:

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

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作为input的Component,你可以决定哪些页面显示按钮,在哪些应该是不可见.因此,通过这种方式,您可以发送信息以告知组件应该如何,并为每个页面自定义它.

因此,如果您想在页面中添加导航栏(不修改默认模板,因此显示创建按钮),您只需添加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 2

对于离子3+

我要解决的问题就是使用自定义组件.

ionic generate component navbar

• 将相关的navbar html添加到组件模板中
• 将任何其他功能添加到组件.ts文件中
• 修改你的选择器到相关的东西,(如果上面使用的命令它应该默认为'navbar'.
• 还要将组件添加到app.module.ts声明中

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

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