Ionic 2 – globale NavBar für die App

In Ionic 1 haben wir die Möglichkeit, eine oberhalb einer , die als generische Navigationsleiste für die gesamte App dient und wir diese per View ausschalten können Basis (mit ionNavView ‘s hideNavBar=true|false .

Es erscheint in Ionic 2, wir müssen eine pro Seite einfügen – und kann keine globale Navigationsleiste für die gesamte App haben. Stimmt das, oder fehlt mir ein Trick?

Wenn ja – es scheint viel Code zu duplizieren?

Außerdem scheint es, dass die NavBar nicht in der Lage ist, eine eigene Zurück-Schaltfläche zu erstellen, und Sie müssen das eigene Markup für die Zurück-Schaltfläche selbst schreiben (pro Seite), was wiederum wie viel Code-Duplikat aussieht .

UPDATE :

Genau wie @mhartington sagt:

Es gibt keine Möglichkeit, eine globale Ion-Navbar zu erstellen , da dies absichtlich geschieht. Der Punkt, an dem eine Navbar für jede Komponente definiert ist, ist so, dass wir die Titel, die Hintergrundfarbe der Navigationsleiste (falls Sie sie ändern) und andere benötigte Eigenschaften animieren können.

Und über das Erstellen einer benutzerdefinierten Direktive, um zu vermeiden, den ion-navbar HTML-Code zu duplizieren:

Das erzeugt immer noch Fehler bei der Projektion von eckigen2 Inhalten. Wir haben einige Probleme, die offen waren, wenn Leute das versuchen und die beste Antwort ist, es nicht zu tun .


NICHT empfohlene Lösung:

Um zu vermeiden, dass so viel Code dupliziert wird, können Sie Ihre eigene benutzerdefinierte Komponente für die Navigationsleiste erstellen.

Erstellen Sie eine navbar.html mit diesem Code:

  MyApp      

Und dann in der 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' }); } } 

Indem Sie hideCreateButton als input für die Component deklarieren, können Sie entscheiden, auf welchen Seiten diese Schaltfläche hideCreateButton und in welchen nicht hideCreateButton werden soll. Auf diese Weise können Sie Informationen senden, um der Komponente mitzuteilen, wie sie sein sollte, und diese für jede Seite anpassen.

Wenn Sie also die Navigationsleiste auf einer Seite hinzufügen möchten (ohne die Standardvorlage zu ändern, also die Schaltfläche “Erstellen”), müssen Sie nur das Element navbar hinzufügen (das wir in der selector Eigenschaft von uns mit unserer benutzerdefinierten Komponente verknüpft haben):

   ...  

Und wenn Sie die create-Schaltfläche ausblenden (oder Ihre navbar wie gewünscht ändern wollen), wird Ihre Seite wie folgt aussehen:

   ...  

hideButton() daran, dass hideButton() in Ihrer customPage.ts wie customPage.ts definiert werden sollte:

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

Für ionische 3+

Was ich getan habe, um dies zu lösen, war einfach eine benutzerdefinierte Komponente zu verwenden.

 ionic generate component navbar 
  • Fügen Sie der Komponentenvorlage die relevante Navigationsleiste html hinzu
  • Fügen Sie der Komponente .ts-Datei weitere functionen hinzu
  • Ändern Sie Ihren Selektor zu etwas Relevantem, (wenn der Befehl darüber verwendet wird, sollte er standardmäßig auf ‘navbar’ setzen.
  • Fügen Sie die Komponente auch zu Ihren app.module.ts-Deklarationen hinzu

Dann können Sie es in jeder Ihrer Seitenvorlagen einfach als benutzerdefiniertes Element verwenden, z

   ...  

Ich habe seither herausgefunden, dass dies nicht möglich ist. Die einzige Möglichkeit, dies zu erreichen, ist die Bereitstellung einer , die automatisch mit der Zurück-Schaltfläche arbeitet.

Z.B:

   Settings