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
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
Per esempio:
Settings