Ionic 2: NavBar globale per l’app

In Ionic 1, abbiamo la possibilità di definire una sopra una , che funge da barra di navigazione generica per l’intera app e potremmo spegnerla su una vista base (usando ionNavView di hideNavBar=true|false .

Appare in Ionic 2 che dobbiamo inserire una per pagina – e non può avere una barra di navigazione globale per l’intera app. È corretto, o mi manca un trucco?

Se è così – sembra un sacco di codice duplicato?

Inoltre, sembra che tu non abbia la possibilità per il NavBar di build il proprio pulsante indietro, e devi scrivere tu stesso il mark-up per il pulsante indietro (per pagina) che, di nuovo, sembra un sacco di codice duplicato .

AGGIORNAMENTO :

Proprio come @mhartington dice:

Non c’è modo di creare una barra di navigazione ionica globale , poiché ciò viene fatto apposta. Il punto di avere una barra di navigazione definita per ciascun componente è che possiamo animare correttamente i titoli, il colore di sfondo della barra di navigazione (se li cambi) e animare le altre proprietà necessarie.

E sulla creazione di una direttiva personalizzata per evitare la duplicazione ion-navbar codice html ion-navbar :

Ciò creerà ancora errori con il modo in cui funziona la proiezione del contenuto angular2. Abbiamo diversi problemi che sono stati aperti quando la gente prova questo e la risposta migliore è non farlo .


Soluzione NON raccomandata:

Per evitare di duplicare così tanto codice, puoi creare il tuo componente personalizzato per la barra di navigazione.

Crea un file navbar.html con questo codice:

  MyApp      

E poi nel 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' }); } } 

Dichiarando hideCreateButton come input del Component , puoi decidere in quali pagine mostrare quel pulsante e in quali non dovrebbero essere visibili. In questo modo, puoi inviare informazioni per dire al componente come dovrebbe essere, e personalizzarlo per ogni pagina.

Pertanto, se si desidera aggiungere la barra di navigazione in una pagina (senza modificare il modello predefinito, quindi mostrando il pulsante di creazione), è sufficiente aggiungere l’elemento navbar ( navbar al componente personalizzato da noi nella proprietà selector ):

   ...  

E se vuoi hide il pulsante Crea (o modificare la barra di navigazione come vuoi) la tua pagina sarà simile a questa:

   ...  

E ricorda che il hideButton() dovrebbe essere definito nel tuo customPage.ts come questo:

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

Per ionico 3+

Quello che ho fatto per risolvere questo è stato semplicemente utilizzare un componente personalizzato.

 ionic generate component navbar 
  • Aggiungi il relativo html di barra di navigazione al modello del componente
  • Aggiungi qualsiasi altra funzionalità al tuo file .ts componente
  • Modifica il tuo selettore su qualcosa di rilevante, (se il comando usato in precedenza dovrebbe essere impostato su “navbar”).
  • Aggiungi anche il componente alle dichiarazioni di app.module.ts

Quindi, in qualsiasi modello di pagina, è sufficiente utilizzarlo come elemento personalizzato, ad es

   ...  

Da allora ho scoperto che questo non è ansible. L’unico modo per ottenere ciò è fornire una e che gestirà automaticamente il pulsante indietro.

Per esempio:

   Settings