angular - navctrl - Ionic 2-NavBar global para o aplicativo



navctrl ionic 5 (3)

Desde então, descobri que isso não é possível. A única maneira de conseguir isso é fornecendo um <ion-navbar> e que manipulará o botão voltar automaticamente.

Por exemplo:

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

No Ionic 1, temos a capacidade de definir uma <ion-nav-bar> acima de uma <ion-nav-view> , que serve como uma barra de navegação genérica para todo o aplicativo e poderíamos desativá-lo em uma visualização base (usando ionNavView do hideNavBar=true|false .

Parece que no Ionic 2 precisamos inserir uma <ion-nav-bar> por página - e não podemos ter uma barra de navegação global para todo o aplicativo. Está correto ou estou perdendo um truque?

Se sim - parece um monte de código duplicado?

Além disso, parece que você não tem a capacidade do NavBar criar seu próprio botão voltar e você deve escrever a própria marcação para o botão voltar (por página), o que, novamente, parece muito código duplicado .


Answer #1

Eu tive um problema semelhante ao criar um aplicativo Ionic 4+ (@ ionic / angular 4.6.2), queria adicionar um botão de login e alguns outros itens globais no cabeçalho.

Você pode conseguir isso de uma maneira bastante simples.

Basta adicionar um cabeçalho de íon contendo uma barra de ferramentas de íon em seu app.component.html como um cabeçalho global, assim:

<ion-header class="page-header">
   <ion-toolbar id="main-toolbar">
      <ion-title>
        <ion-label>{{ pageTitle }}</ion-label>
      </ion-title>
      <!-- add here all the things you need in your header --> 
   </ion-toolbar>
</ion-header>
<ion-router-outlet id="content" main></ion-router-outlet>

O problema aqui é que o "cabeçalho global" cobrirá o conteúdo de qualquer página, se você fizer apenas isso. Portanto, para uma solução alternativa, basta adicionar um cabeçalho de íon vazio contendo uma barra de ferramentas de íon vazia no topo de todas as suas páginas antes da tag de conteúdo, da seguinte maneira:

<ion-header>
  <ion-toolbar></ion-toolbar>
</ion-header>
<ion-content>
  <!-- your content here -->
</ion-content>

Fazendo isso, o "cabeçalho global" cobrirá o cabeçalho da página e o conteúdo começará logo após.

Em seguida, você pode gerenciar todo o código dos seus controles globais de cabeçalho no arquivo app.component.ts .

Eu acho que pode haver algum comportamento estranho se o cabeçalho principal tiver uma altura maior que a altura da barra de ferramentas "padrão", mas com um bom CSS, você poderá corrigi-lo.

Além disso, esta solução alternativa funciona bem com um menu lateral.

Espero que ajude!


Answer #2

ATUALIZAÇÃO :

Assim como @mhartington diz:

Não há como criar uma barra de íons global , pois isso é feito de propósito. O objetivo de ter uma barra de navegação definida para cada componente é para que possamos animar adequadamente os títulos, a cor de fundo da barra de navegação (se você os alterar) e animar outras propriedades necessárias.

E sobre a criação de uma diretiva personalizada para evitar a duplicação ion-navbar código html ion-navbar :

Isso ainda criará erros no funcionamento da projeção de conteúdo angular2. Temos vários problemas que foram abertos quando as pessoas tentam isso e a melhor resposta é não fazê-lo .

Solução NÃO recomendada:

Para evitar duplicar tanto código, você pode criar seu próprio componente personalizado para a barra de navegação.

Crie um navbar.html com este código:

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

E então no 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' });
    }
}

Ao declarar o hideCreateButton como uma input do Component , você pode decidir em quais páginas mostram esse botão e em quais não devem estar visíveis. Dessa forma, você pode enviar informações para informar ao componente como deve ser e personalizá-lo para cada página.

Portanto, se você deseja adicionar a barra de navegação em uma página (sem modificar o modelo padrão, mostrando o botão criar), basta adicionar o elemento navbar (vinculado ao nosso componente personalizado por nós na propriedade selector ):

<navbar></navbar>

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

E se você deseja ocultar o botão criar (ou modificar sua barra de navegação como deseja), sua página será semelhante a esta:

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

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

E lembre-se de que o hideButton() deve ser definido no seu customPage.ts assim:

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