30

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

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

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

此外，您似乎没有能力让 NavBar 构建自己的后退按钮，并且您必须自己（每页）为后退按钮编写自己的标记，这再次看起来像很多代码重复.

4

4 回答 4

22

更新：

就像@mhartington 说的：

无法创建全局 ion-navbar，因为这是故意的。为每个组件定义导航栏的目的是让我们可以正确地为标题、导航栏背景颜色（如果您更改它们）和其他所需属性设置动画。

关于创建自定义指令以避免重复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;
    }
}
于 2016-06-14T10:07:11.080 回答
8

对于离子 3+

我为解决这个问题所做的只是使用自定义组件。

ionic generate component navbar
  • 将相关的导航栏 html 添加到您的组件模板中
  • 将任何其他功能添加到您的组件 .ts 文件
  • 将您的选择器修改为相关的内容，（如果使用上面的命令，它应该默认为“导航栏”。
  • 还将组件添加到您的 app.module.ts 声明中

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

<navbar></navbar>
<ion-content padding>
   ...
</ion-content/>
于 2017-06-15T00:00:59.697 回答
3

我在创建 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-header，如下所示：

<ion-header>
  <ion-toolbar></ion-toolbar>
</ion-header>
<ion-content>
  <!-- your content here -->
</ion-content>

这样做，“全局标题”将覆盖页面标题，内容将在它之后开始。

然后，您可以在app.component.ts文件中管理全局标题控件的所有代码。

我想如果主标题的高度大于“标准”工具栏高度但使用一些不错的 CSS 你应该能够修复它，可能会有一些奇怪的行为。

此外，此解决方法适用于侧边菜单。

希望能帮助到你！

于 2019-07-14T22:12:40.703 回答
0

从那以后我发现这是不可能的。实现这一点的唯一方法是提供一个<ion-navbar>and ，它将自动处理后退按钮。

例如：

<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>
于 2016-04-20T13:59:15.250 回答