Ionic 2 - 应用程序的全局NavBar

3 回答

• 0

  UPDATE ：

  就像@mhartington说：

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

  关于创建自定义指令以避免重复 ion-navbar html代码：

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

  ---

  NOT recommended solution:

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

  使用以下代码创建 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() 应该在_1028700中定义，如下所示：

  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;
      }
  }
  

  回复于 2024-04-29T05:17:18+08:00
• 8

  对于离子3

  我所做的就是使用自定义组件 .

  ionic generate component navbar
  

  • 将相关的导航栏html添加到组件模板中

  • 将任何其他功能添加到组件.ts文件中

  • 将选择器修改为相关的内容（如果上面使用的命令，则应默认为'navbar' .

  • 还要将组件添加到app.module.ts声明中

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

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

  回复于 2024-04-29T05:17:18+08:00
• 19

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

  回复于 2024-04-29T05:17:18+08:00