Ionic 2 - globalny NavBar dla aplikacji

Question

W Ionic 1 mamy możliwość zdefiniowania <ion-nav-bar> powyżej <ion-nav-view>, który służy jako ogólny pasek nawigacyjny dla całej aplikacji i możemy go wyłączyć w widoku per-view (przy użyciu ionNavView „s hideNavBar=true|false

wydaje się Ionic 2 musimy wstawić <ion-nav-bar> za stronę -.. i nie może mieć globalne pasku nawigacyjnym dla całej aplikacji jest to prawda, czy jestem brakuje trick

?

Jeśli tak - wygląda na to, że jest dużo powielonych kodów?

Wygląda na to, że nie masz możliwości, aby NavBar zbudował swój własny przycisk powrotu, i sam musisz napisać własną markę dla przycisku "Wstecz" (na stronie), która znowu wygląda na duplikat kodu .

Answer 1

UPDATE:

Podobnie jak @mhartington mówi:

Nie ma sposobu, aby stworzyć globalną jonowy-navbar, jak to jest wykonane w celu . Punktem zdefiniowania paska nawigacyjnego dla każdego komponentu jest to, że możemy odpowiednio animować tytuły, kolor tła paska nawigacyjnego (jeśli zmienimy je) i animować inne wymagane właściwości.

A o tworzeniu niestandardowych dyrektywy, aby uniknąć duplikowania kodu ion-navbar HTML:

To nadal creat błędy z jak angular2 projekcja zawartości działa. Mamy kilka problemów, które zostały otwarte, kiedy ludzie próbują tego i najlepszą odpowiedzią jest nie robienie tego.

---

NIE zalecane rozwiązanie:

W celu uniknięcia powielania tyle kodu, można stworzyć swój własny komponent na pasku nawigacyjnym.

Tworzenie navbar.html z tym kodem:

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

a następnie w 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' }); 
    } 
} 

zgłaszając hideCreateButton jako input z Component, można zdecydować się, które strony pokazują, że w którym nie powinny być widoczne. W ten sposób można wysyłać informacje, aby poinformować komponent o tym, jaki powinien być, i dostosować go do każdej strony.

Jeśli chcesz dodać navbar na stronie (bez modyfikowania domyślnego szablonu, więc pokazując przycisk tworzenia), musisz po prostu dodać element navbar (powiązany z naszym niestandardowym składnikiem przez nas we właściwości selector):

<navbar></navbar> 

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

A jeśli chcesz ukryć przycisk Utwórz (lub zmodyfikować ty NavBar jak chcesz) Twoja strona będzie wyglądać ten jeden:

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

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

i pamiętaj, że hideButton() powinny być określone w y Nasz customPage.ts tak:

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

Od tego czasu okazało się, że nie jest to możliwe. Jedynym sposobem, aby to osiągnąć, jest dostarczenie <ion-navbar>, która automatycznie obsłuży przycisk Back.

Np

<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

Dla jonowej 3+

co zrobiłem, aby rozwiązać ten został po prostu wykorzystać niestandardowy składnik.

ionic generate component navbar 

• Dodaj odpowiedni html NavBar do szablonu komponentu
• Dodaj żadnych innych funkcji do swoich składowych .TS złożyć
• Modyfikowanie wybieraka coś odpowiedniego, (jeśli komenda nad nim wykorzystane należy po prostu domyślne do 'paska nawigacyjnego'.
• dodać także komponent do app.module.ts deklaracje

Następnie w każdym z szablonów stron, po prostu używać go jako element niestandardowy np

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