在 Ionic 1 中，我们能够在 <ion-nav-view> 上方定义一个 <ion-nav-bar>，它作为整个应用程序的通用导航栏，我们可以在每次查看的基础上将其关闭（使用 @987654323 @的hideNavBar=true|false。
在 Ionic 2 中，我们必须在每页插入一个 <ion-nav-bar> - 并且不能为整个应用程序提供全局导航栏。这是正确的，还是我错过了一个技巧？
如果是这样 - 似乎有很多重复的代码？
此外，您似乎没有能力让 NavBar 构建自己的后退按钮，并且您必须自己（每页）为后退按钮编写自己的标记，这又似乎很多代码重复。
【问题讨论】：
标签： angular typescript ionic-framework ionic2 ionic3
我后来发现这是不可能的。实现这一点的唯一方法是提供<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>
【讨论】：
ion-navbar，或者将其放入自己的自定义组件中并将其放到所有页面中？
更新：
就像@mhartington 所说：
无法创建全局 ion-navbar，因为这是在 目的。为每个组件定义导航栏的意义在于 我们可以正确地为标题设置动画，导航栏背景颜色（如果 您更改它们）并为所需的其他属性设置动画。
关于创建自定义指令以避免重复ion-navbar html 代码：
这仍然会导致 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 声明为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;
}
}
【讨论】：
对于离子 3+
我为解决这个问题所做的只是使用自定义组件。
ionic generate component navbar
然后在您的任何页面模板中，只需将其用作自定义元素 例如
<navbar></navbar>
<ion-content padding>
...
</ion-content/>
【讨论】：
我在创建 Ionic 4+ 应用程序 (@ionic/angular 4.6.2) 时遇到了类似问题，我想在标题中添加登录按钮和其他一些全局内容。
您可以通过一种非常简单的方式实现这一点。
只需在您的 app.component.html 中添加一个包含 ion-toolbar 的 ion-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>
这里的问题是，如果您只这样做，“全局标题”将覆盖任何页面的内容。所以有一个解决方法，只需在内容标记之前的所有页面顶部添加一个包含空 ion-toolbar 的空 ion-header，如下所示：
<ion-header>
<ion-toolbar></ion-toolbar>
</ion-header>
<ion-content>
<!-- your content here -->
</ion-content>
这样做，“全局标题”将覆盖页面标题，内容将紧随其后。
然后，您可以在 app.component.ts 文件中管理全局标题控件的所有代码。
我想如果主标题的高度大于“标准”工具栏高度但使用一些漂亮的 CSS 你应该能够修复它。
此外，此解决方法适用于侧边菜单。
希望对你有帮助！
【讨论】：