web-dev-qa-db-fra.com

Ionic 2 - barre de navigation globale pour l'application

Dans Ionic 1, nous avons la possibilité de définir un <ion-nav-bar> au-dessus d’un <ion-nav-view>, qui sert de barre de navigation générique pour l’ensemble de l’application et que nous pourrions désactiver par vue (en utilisant ionNavView's hideNavBar=true|false.

Il apparaît dans Ionic 2 que nous devons insérer un <ion-nav-bar> par page - et nous ne pouvons pas avoir une barre de navigation globale pour l’ensemble de l’application. Est-ce correct ou est-ce que je manque un truc?

Si c'est le cas - cela ressemble à beaucoup de code dupliqué?

En outre, il semble que la barre de navigation ne soit pas en mesure de créer son propre bouton Précédent et que vous deviez écrire vous-même le balisage du bouton Précédent (par page), ce qui, encore une fois, semble être une duplication de code. .

angulartypescriptionic-frameworkionic2ionic3
26
keldar

METTRE &AGRAVE; JOUR:

Comme @mhartington dit:

Il n'y a aucun moyen de créer un ion-navbar global , comme cela est fait sur objectif. Le point d’avoir une barre de navigation définie pour chaque composant est donc que nous puissions animer correctement les titres, la couleur d’arrière-plan de la barre de navigation (si vous les modifiez) et animer les autres propriétés requises.

Et à propos de la création d'une directive personnalisée pour éviter la duplication de ion-navbar code html:

Cela créera toujours des erreurs avec la façon dont angular2 content projection travaux. Nous avons plusieurs problèmes en suspens lorsque les gens essayaient cela et la meilleure réponse est de ne pas le faire .

Solution non recommandée:

Afin d'éviter de dupliquer autant de code, vous pouvez créer votre propre composant personnalisé pour la barre de navigation.

Créez un navbar.html avec ce 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>

Et puis dans le 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' });
    }
}

En déclarant la hideCreateButton comme une input de la Component, vous pouvez décider dans quelles pages afficher ce bouton et quelles autres ne doivent pas être visibles. Ainsi, de cette manière, vous pouvez envoyer des informations pour indiquer au composant comment il devrait être, et le personnaliser pour chaque page.

Ainsi, si vous souhaitez ajouter la barre de navigation dans une page (sans modifier le modèle par défaut, affichant ainsi le bouton de création), il vous suffit d'ajouter l'élément navbar (lié à notre composant personnalisé par nous dans la propriété selector):

<navbar></navbar>

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

Et si vous souhaitez masquer le bouton de création (ou modifier votre barre de navigation comme vous le souhaitez), votre page ressemblera à celle-ci:

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

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

Et rappelez-vous que la hideButton() devrait être définie dans votre customPage.ts comme ceci:

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

Pour ionique 3+

Pour résoudre ce problème, j’ai simplement utilisé un composant personnalisé.

ionic generate component navbar
  • Ajoutez le code html de la barre de navigation approprié à votre modèle de composant
  • Ajoutez toute autre fonctionnalité à votre fichier .ts de composant
  • Modifiez votre sélecteur en choisissant quelque chose de pertinent (si vous utilisez la commande au-dessus de celui-ci , La valeur par défaut devrait simplement être 'navbar'.
  • Ajoutez également le composant à vos déclarations app.module.ts.

Puis, dans l’un de vos modèles de page, utilisez-le simplement comme élément personnalisé 

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

J'ai découvert depuis que ce n'est pas possible. Le seul moyen d'y parvenir est de fournir un <ion-navbar> qui gérera automatiquement le bouton Précédent.

Par exemple.:

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