Ionic 2 - globale NavBar für die App

Question

In Ionic 1 haben wir die Möglichkeit, eine <ion-nav-bar> über eine <ion-nav-view> zu definieren, die als generische Navigationsleiste für die gesamte App dient und wir können sie per View deaktivieren (unter Verwendung von ionNavView ‚s hideNavBar=true|false

Es in Ionic erscheint 2 haben wir eine <ion-nav-bar> pro Seite einfügen -.. und kann nicht eine globale Navigationsleiste für die gesamte App haben Ist das richtig, oder bin ich dabei einen Trick

?

Wenn ja - es scheint wie viel Doppelcode?

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 .

Answer 1

UPDATE:

Genau wie @mhartington sagt:

Es gibt keine Möglichkeit, eine globale Ionen navbar zu schaffen, da dies getan am Zweck. Der Punkt, eine Navbar für jede Komponente definiert zu haben, ist so , dass wir die Titel, navbar Hintergrundfarbe richtig animieren können (wenn Sie sie ändern) und anderen erforderlichen Eigenschaften animieren.

Und über eine eigene Richtlinie zu schaffen ion-navbar HTML-Code zu vermeiden Duplizieren:

Das wird noch creat Fehler mit, wie angular2 Inhalt Projektion funktioniert. Wir haben mehrere Probleme, die geöffnet wurden, wenn Leute versuchen, diese und die beste Antwort ist, es nicht zu tun.

---

NICHT empfohlene Lösung:

Um so viel Code zu vermeiden duplizieren, können Sie Ihre eigenen kundenspezifischen Komponente für die navbar erstellen.

erstellen navbar.html mit diesem Code:

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

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

Durch die hideCreateButton als input der Component deklarieren, können Sie sich entscheiden, in welchen Seiten zeigen, dass Taste und in denen sollte nicht sichtbar sein. 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 zum Erstellen), müssen Sie einfach das Element navbar (gebunden an unsere benutzerdefinierte Komponente von uns in der selector-Eigenschaft) hinzufügen:

<navbar></navbar> 

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

und wenn Sie auf die Schaltfläche erstellen verbergen (oder ändern Sie navbar wie Sie wollen), um Ihre Seite wie diese aussehen: in

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

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

und denken Sie daran, dass die hideButton() definiert werden sollte y unsere customPage.ts wie folgt aus:

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

Answer 2

Ich habe seit dem herausgefunden, dass dies nicht möglich ist. Die einzige Möglichkeit, dies zu erreichen, ist die Bereitstellung einer <ion-navbar>, die automatisch die Zurück-Taste bedient.

ZB:

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

Für ionische 3+

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

ionic generate component navbar 

• die entsprechende navbar html zu Ihrer Komponente Vorlage hinzufügen
• andere Funktionalität, um Ihre Komponente .ts Datei hinzufügen
• Ändern Sie bitte Ihre Wähler auf etwas relevant, (wenn Befehl darüber verwendet sollte nur Standard zu 'navbar'.
• fügen Sie auch die Komponente zu Ihrer app.module.ts Erklärungen

Dann in Ihren Seitenvorlagen, einfach als benutzerdefiniertes Element verwendet beispiel

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