angular - Ionic 2 - NavBar global pentru aplicație

În Ionic 1, avem posibilitatea de a defini un <ion-nav-bar> deasupra unui <ion-nav-view>, care servește ca bară de navigare generală pentru întreaga aplicație și am putea să o dezactivăm pe bază de vizualizare (folosind ionNavView cu hideNavBar=true|false.

Se pare că în Ionic 2 trebuie să introducem un <ion-nav-bar> pentru fiecare pagină și nu putem avea o bară de navigare globală pentru întreaga aplicație. Este corect, sau îmi scapă ceva?

Dacă da - pare să fie mult cod duplicat?

De asemenea, se pare că nu aveți capacitatea ca Bara de Navigare să-și construiască propriul buton de întoarcere și trebuie să scrieți marca proprie pentru butonul de întoarcere singur (pentru fiecare pagină), ceea ce, din nou, pare a fi mult cod duplicat.

Răspuns #1

ACTUALIZARE:

Exact așa cum spune @mhartington:

Nu există nicio modalitate de a crea un ion-navbar global, deoarece acest lucru este făcut intenționat. Scopul de a avea o navbar definită pentru fiecare componentă este ca să putem anima corect titlurile, culoarea de fundal a navbar-ului (dacă le schimbați) și să animăm alte proprietăți necesare.

Și despre crearea unei directive personalizate pentru a evita duplicarea codului HTML ion-navbar:

Acest lucru va crea în continuare erori în modul în care funcționează proiecția de conținut în Angular2. Avem mai multe probleme care au fost deschise atunci când oamenii încearcă acest lucru și cea mai bună soluție este să nu o faci.

Soluție NU recomandată:

Pentru a evita duplicarea atât de mult cod, poți să creezi propriul tău component personalizat pentru bara de navigare.

Creează un navbar.html cu acest cod:

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

Și apoi în 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' });
    }
}

Prin declararea hideCreateButton ca un input al Component, poți decide în ce pagini să fie afișat acel buton și în care să nu fie vizibil. Astfel, poți trimite informații pentru a-i spune componentului cum ar trebui să fie și să îl personalizezi pentru fiecare pagină.

Deci, dacă vrei să adaugi bara de navigare într-o pagină (fără a modifica șablonul implicit, astfel încât să fie vizibil butonul de creare), trebuie doar să adaugi elementul navbar (legat de componenta noastră personalizată de noi prin proprietatea selector):

<navbar></navbar>

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

Și dacă vrei să ascunzi butonul de creare (sau să modifici bara de navigare așa cum vrei) pagina ta va arăta ca aceasta:

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

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

Și amintește-ți că hideButton() ar trebui să fie definit în customPage.ts astfel:

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

Răspunsul #2

Pentru ionic 3+

Ceea ce am făcut pentru a rezolva acest lucru a fost pur și simplu să folosesc un component personalizat.

ionic generate component navbar

• Adaugă html-ul relevant pentru bara de navigare în șablonul componentului tău
• Adaugă orice altă funcționalitate în fișierul .ts al componentului tău
• Modificați selectorul dvs. la ceva relevant, (dacă ați folosit comanda de mai sus, ar trebui să revină doar la 'navbar').
• De asemenea, adaugă componenta la declarațiile din app.module.ts

Apoi, în oricare dintre șabloanele tale de pagină, folosește-l pur și simplu ca un element personalizat, de exemplu

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