Question

在Ionic 1中，我们可以在public static void main(String[] args){ int a = Integer.MAX_VALUE; System.out.println(a); System.out.println(a + 1);//-2147483648 System.out.println(2 - a);//-2147483645 System.out.println(-2 - a);//2147483647 System.out.println(2 * a);//-2 System.out.println(4 * a);//-4 System.out.println(6 * a);//-6 System.out.println(8 * a);//-8 System.out.println(10 * a);//-10 System.out.println(3 * a);//2147483645 System.out.println(5 * a);//2147483643 System.out.println(7 * a);//2147483641 System.out.println(9 * a);//2147483639 }之上定义<ion-nav-bar>，它可以作为整个应用的通用导航栏，我们可以在每个视图的基础上将其关闭（使用<ion-nav-view>＆＃39; s ionNavView。

它出现在Ionic 2中，我们必须每页插入hideNavBar=true|false - 并且不能为整个应用程序提供全局导航栏。这是正确的，还是我错过了一招？

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

此外，看起来你没有能力让NavBar建立自己的后退按钮，你必须自己（每页）为后退按钮编写自己的标记，这看起来很像代码重复。

Answer 1

<强>更新：

就像@mhartington说：

无法创建全局离子导航栏，因为这样做了目的。为每个组件定义导航栏的重点是这样的我们可以正确设置标题，导航栏背景颜色的动画（如果你改变它们并动画所需的其他属性。

关于创建自定义指令以避免重复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声明为input的{{1}}，您可以决定哪些页面显示该按钮以及哪些页面不应显示。因此，通过这种方式，您可以发送信息告诉组件应该如何，并为每个页面自定义它。

因此，如果您想在页面中添加导航栏（不修改默认模板，因此显示创建按钮），您只需添加Component元素（由我们绑定到我们的自定义组件{ {1}}属性）：

navbar

如果您想要隐藏创建按钮（或按照您的意愿修改导航栏），您的页面将如下所示：

selector

请记住<navbar></navbar> <ion-content> ... </ion-content>应该在<navbar [hideCreateButton]="hidebutton()"></navbar> <ion-content> ... </ion-content>中定义，如下所示：

hideButton()

Answer 2

对于离子3 +

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

ionic generate component navbar

将相关的navbar html添加到您的组件模板
将任何其他功能添加到组件.ts文件
将您的选择器修改为相关的内容（如果在其上方使用了命令）应该默认为＆＃39; navbar＆＃39;。
同时将组件添加到app.module.ts声明

然后在任何页面模板中，只需将其用作自定义元素即可 e.g

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

Answer 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-toolbar 的空白 ion-header ，如下所示：

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

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

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

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

此外，此解决方法在侧面菜单中也可以正常工作。

希望有帮助！

Answer 4

我发现这是不可能的。实现此目的的唯一方法是提供<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>

Ionic 2 - 应用程序的全局NavBar

4 个答案: