angular - buttons - ionic 3 navigation

Ionic 2: NavBar global para la aplicación

Question

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

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

Si es así, ¿parece un montón de código duplicado?

Además, parece que no tiene la capacidad para que la barra de navegación cree su propio botón de retroceso, y tiene que escribir el propio marcado para el botón de retroceso usted mismo (por página) que, de nuevo, parece una gran cantidad de código duplicado .

Answer 1

Desde entonces descubrí que esto no es posible. La única forma de lograr esto es proporcionando una <ion-navbar> y eso manejará el botón de retroceso automáticamente.

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

Answer 2

Para iónico 3+

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

ionic generate component navbar

• Agregue el html de barra de navegación relevante a su plantilla de componente
• Agregue cualquier otra funcionalidad a su archivo .ts componente
• Modifique su selector a algo relevante, (si se usa el comando anterior, solo debe ser predeterminado a ''navbar''.
• Agregue también el componente a sus declaraciones de app.module.ts

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

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

Answer 3

Tuve un problema similar al crear una aplicación Ionic 4+ (@ ionic / angular 4.6.2), quería agregar un botón de inicio de sesión y algunas otras cosas globales en el encabezado.

Puede lograr eso de una manera bastante simple.

Simplemente agregue un encabezado de iones que contenga una barra de herramientas de iones en su app.component.html como un encabezado global, como este:

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

El problema aquí es que el "encabezado global" superpondrá el contenido de cualquier página si solo hace eso. Entonces, tiene una solución alternativa, solo agregue un encabezado de iones vacío que contenga una barra de herramientas de iones vacía en la parte superior de todas sus páginas antes de la etiqueta de contenido, de la siguiente manera:

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

Al hacer eso, el "encabezado global" se superpondrá al encabezado de la página y el contenido comenzará justo después.

Luego puede administrar todo el código para sus controles de encabezado global en su archivo app.component.ts .

Supongo que podría haber un comportamiento extraño si el encabezado principal tiene una altura mayor que la altura de la barra de herramientas "estándar", pero con un buen CSS, debería poder solucionarlo.

Además, esta solución funciona bien con un menú lateral.

¡Espero eso ayude!

Answer 4

ACTUALIZACIÓN

Justo como dice @mhartington:

No hay forma de crear una barra de navegación de iones global , ya que esto se hace a propósito. El punto de tener una barra de navegación definida para cada componente es para que podamos animar adecuadamente los títulos, el color de fondo de la barra de navegación (si los cambia) y animar otras propiedades necesarias.

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

Eso seguirá generando errores con el funcionamiento de la proyección de contenido angular2. Tenemos varios problemas que se han abierto cuando las personas intentan 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.

Cree 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'' });
    }
}

Al declarar hideCreateButton como una input del Component , puede decidir en qué páginas mostrar ese botón y en cuáles no deberían estar visibles. De esta forma, puede enviar información para indicarle al componente cómo debe ser y personalizarla para cada página.

Entonces, 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 de la navbar (enlazado a nuestro componente personalizado por nosotros en la propiedad del selector ):

<navbar></navbar>

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

Y si desea ocultar el botón Crear (o modificar su barra de navegación como desee) su página se verá así:

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

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

Y recuerde que hideButton() debe definirse en su customPage.ts esta manera:

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