typescript Ionic 2 - 应用程序的全局导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35936198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 2 - global NavBar for the app
提问by keldar
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 1 中，我们可以在 an 上<ion-nav-bar>方定义一个<ion-nav-view>，作为整个应用程序的通用导航栏，我们可以在每个视图的基础上将其关闭（使用ionNavView's hideNavBar=true|false.
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?
它出现在 Ionic 2 中，我们必须在<ion-nav-bar>每页插入一个- 并且不能为整个应用程序提供全局导航栏。这是正确的，还是我错过了一个技巧？
If so - it seems like a lot of duplicated code?
如果是这样 - 似乎有很多重复的代码？
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.
此外，您似乎没有让 NavBar 构建自己的后退按钮的能力，并且您必须自己（每页）为后退按钮编写自己的标记，这似乎又重复了很多代码.
采纳答案by sebaferreras
UPDATE:
更新：
Just like @mhartington says:
就像@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，因为这是故意完成的。为每个组件定义导航栏的意义在于，我们可以正确地为标题、导航栏背景颜色（如果您更改它们）设置动画并为所需的其他属性设置动画。
And about creating a custom directive to avoid duplicating ion-navbarhtml code:
关于创建自定义指令以避免重复ion-navbarhtml 代码：
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.
这仍然会导致 angular2 内容投影的工作方式出错。当人们尝试这样做时，我们有几个问题已经公开，最好的答案是不要这样做。
NOT recommended solution:
不推荐的解决方案：
In order to avoid duplicating so much code, you can create your own custom component for the navbar.
为了避免重复如此多的代码，您可以为导航栏创建自己的自定义组件。
Create a navbar.htmlwith this code:
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>
And then in the navbar.ts:
然后在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' });
}
}
By declaring the hideCreateButtonas an inputof 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.
通过声明的hideCreateButton作为input的Component，你可以决定哪些页面显示按钮，在哪些应该是不可见。所以通过这种方式，你可以发送信息告诉组件它应该如何，并为每个页面定制它。
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 navbarelement (binded to our custom component by us in the selectorproperty):
因此，如果您想在页面中添加导航栏（不修改默认模板，因此显示创建按钮），您只需添加navbar元素（由我们在selector属性中绑定到我们的自定义组件）：
<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>
And remember that the hideButton()should be defined in your customPage.tslike this:
请记住，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;
}
}
回答by Samus
For ionic 3+
对于离子 3+
What I did to solve this was simply use a custom component.
我为解决这个问题所做的只是使用自定义组件。
ionic generate component navbar
- Add the relevant navbar html to your component template
- Add any other functionality to your component .ts file
- Modify your selector to something relevant, (if used command above it should just default to 'navbar'.
- Also add the component to your app.module.ts declarations
- 将相关的导航栏 html 添加到您的组件模板中
- 将任何其他功能添加到您的组件 .ts 文件中
- 将您的选择器修改为相关的内容，（如果使用上面的命令，它应该只是默认为“导航栏”。
- 还将组件添加到您的 app.module.ts 声明中
Then in any of your page templates, simply use it as a custom element e.g
然后在您的任何页面模板中，只需将其用作自定义元素，例如
<navbar></navbar>
<ion-content padding>
...
</ion-content/>
回答by jmwfr
I had a similar issue creating an Ionic 4+ app (@ionic/angular 4.6.2), I wanted to add a login button and some other global stuffs in the header.
我在创建 Ionic 4+ 应用程序（@ionic/angular 4.6.2）时遇到了类似的问题，我想在标题中添加一个登录按钮和其他一些全局内容。
You can achieve that in a quite simple way.
您可以通过一种非常简单的方式实现这一目标。
Just add a ion-headercontaining a ion-toolbarin your app.component.htmlas a global header, like this:
只需在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>
The problem here is that the "global header" will overlay the content of any page if you do only that. So has a workaround just add an empty ion-headercontaining an empty ion-toolbaron top of all your pages before the content tag, as follow:
这里的问题是，如果您只这样做，“全局标题”将覆盖任何页面的内容。所以有一个解决方法，只需在内容标签之前的所有页面顶部添加一个包含空离子工具栏的空离子标题，如下所示：
<ion-header>
<ion-toolbar></ion-toolbar>
</ion-header>
<ion-content>
<!-- your content here -->
</ion-content>
Doing that the "global header" will overlay the page header and the content will begin just after it.
这样做“全局标题”将覆盖页面标题，内容将在它之后开始。
Then you can manage all the code for your global header controls in your app.component.tsfile.
然后，您可以在app.component.ts文件中管理全局标头控件的所有代码。
I guess there could be some strange behaviour if the main header has a height greater than the "standard" toolbar height but with some nice CSS you should be able to fix it.
如果主标题的高度大于“标准”工具栏高度，我想可能会有一些奇怪的行为，但使用一些不错的 CSS，您应该能够修复它。
Furthermore, this workaround works fine with a side menu.
此外，此解决方法适用于侧边菜单。
Hope it helps!
希望能帮助到你！
回答by keldar
I have since found out this is not possible. The only way to achieve this is by providing an <ion-navbar>and that will handle the back button automatically.
我后来发现这是不可能的。实现这一点的唯一方法是提供一个<ion-navbar>和 将自动处理后退按钮。
E.g.:
例如：
<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>
