Ionic 2-barra de navegación global para la aplicación


En Ionic 1, tenemos la capacidad de definir un <ion-nav-bar> por encima de un <ion-nav-view>, que sirve como una barra de navegación genérica para toda la aplicación y podríamos desactivarla por visión (usando ionNavView's hideNavBar=true|false.

Aparece en Ionic 2 tenemos que insertar un <ion-nav-bar> por página - y no puede tener una barra de navegación global para toda la aplicación. ¿Es correcto, o me estoy perdiendo un truco?

Si es así-parece que una gran cantidad de código duplicado?

Además, parece que no tiene la capacidad de la barra de navegación para construya su propio botón atrás, y usted tiene que escribir el propio marcado para el botón atrás usted mismo (por página) que, de nuevo, parece un montón de código duplicado.

Author: sebaferreras, 2016-03-11

3 answers

ACTUALIZACIÓN :

Al igual que @mhartington dice:

No hay manera de crear un ion-navbar global, ya que esto se hace en propósito. El punto de tener una barra de navegación definida para cada componente es tan que podemos animar correctamente los títulos, el color de fondo de la barra de navegación (si cambiarlos) y animar otras propiedades necesarias.

Y sobre la creación de una directiva personalizada para evitar duplicar ion-navbar código html:

Que será todavía crea errores con cómo angular2 proyección de contenido obrar. Tenemos varios problemas que han estado abiertos cuando la gente intenta esto y la mejor respuesta es no hacerlo.


Solución NO recomendada:

Para evitar duplicar tanto código, puede crear su propio componente personalizado para la barra de navegación.

Crea un navbar.html con este código:

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

Y luego en el 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' });
    }
}

Declarando el hideCreateButton como un input de la Component, puede decidir en qué páginas se muestra ese botón y en cuáles no deben ser visibles. Así que de esta manera, puede enviar información para decirle al componente cómo debe ser, y personalizarlo para cada página.

Así que si desea agregar la barra de navegación en una página (sin modificar la plantilla predeterminada, mostrando el botón crear) solo tiene que agregar el elemento navbar (enlazado a nuestro componente personalizado por nosotros en la propiedad selector):

<navbar></navbar>

<ion-content>
  ...
</ion-content>

Y si quieres ocultar el botón crear (o modificar tu barra de navegación como quieras) tu página se verá así:

<navbar [hideCreateButton]="hidebutton()"></navbar>

<ion-content>
   ...
</ion-content>

Y recuerda que el hideButton() debe definirse en tu customPage.ts así: {[18]]}

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;
    }
}
 19
Author: sebaferreras,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-27 10:00:02

Para 3 iónicos +

Lo que hice para resolver esto fue simplemente usar un componente personalizado.

ionic generate component navbar
  • Agregue el html de la barra de navegación relevante a su plantilla de componente
  • Agregue cualquier otra funcionalidad a su componente .ts file
  • Modifique su selector a algo relevante, (si se usa comando encima de él debería ser por defecto 'navbar'.
  • También agregue el componente a su aplicación.módulo.declaraciones ts

Luego, en cualquiera de sus plantillas de página, simplemente úsela como una personalizada elemento por ejemplo,

<navbar></navbar>
<ion-content padding>
   ...
</ion-content/>
 7
Author: Samus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-15 09:54:47

Desde entonces he descubierto que esto no es posible. La única manera de lograr esto es proporcionando un <ion-navbar> y que manejará el botón atrás automáticamente.

Ej:

<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>
 0
Author: keldar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-20 13:59:15