ACTUALIZAR :

Al igual que @mhartington dice:

No hay forma de crear una barra de navegación de iones global , ya que esto se hace a propósito. El objetivo de tener una barra de navegación definida para cada componente es que podamos animar correctamente los títulos, el color de fondo de la barra de navegación (si los cambia) y animar otras propiedades necesarias.

Y sobre la creación de una directiva personalizada para evitar duplicar el código html ion-navbar :

Eso aún creará errores con el funcionamiento de la proyección de contenido angular2. Tenemos varios problemas que han estado abiertos cuando la gente intenta esto y la mejor respuesta es no hacerlo .

Solución NO recomendada:

Para evitar duplicar tanto código, puede crear su propio componente personalizado para la barra de navegación.

Cree un navbar.html con 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>

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

Al declarar el hideCreateButton como una input del Component , puede decidir en qué páginas mostrar ese botón y en cuáles no debería estar visible. Entonces, de esta manera, puede enviar información para decirle al componente cómo debe ser y personalizarlo para cada página.

Entonces, si desea agregar la barra de navegación en una página (sin modificar la plantilla predeterminada, mostrando el botón Crear), solo tiene que agregar el elemento de la navbar de navegación (vinculado a nuestro componente personalizado por nosotros en la propiedad del selector ):

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

Y si desea ocultar el botón Crear (o modificar su barra de navegación como desee), su página se verá así:

 <navbar [hideCreateButton]="hidebutton()"></navbar> <ion-content> ... </ion-content>

Y recuerda que hideButton() debe definirse en tu customPage.ts de esta manera:

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

Para iónico 3+

Lo que hice para resolver esto fue simplemente usar un componente personalizado.

 ionic generate component navbar

• Agregue el html de barra de navegación relevante a su plantilla de componente
• Agregue cualquier otra funcionalidad a su archivo .ts de componente
• Modifique su selector a algo relevante (si se usa el comando anterior, debería estar predeterminado en 'barra de navegación').
• También agregue el componente a sus declaraciones app.module.ts

Luego, en cualquiera de las plantillas de su página, simplemente utilícela como un elemento personalizado, por ejemplo

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

Tuve un problema similar al crear una aplicación Ionic 4+ (@ionic/angular 4.6.2), quería agregar un botón de inicio de sesión y algunas otras cosas globales en el encabezado.

Puedes lograrlo de una manera bastante simple.

Simplemente agregue un encabezado de iones que contenga una barra de herramientas de iones en su app.component.html como un encabezado global, como este:

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

El problema aquí es que el "encabezado global" superpondrá el contenido de cualquier página si solo hace eso. Entonces, tiene una solución alternativa, solo agregue un encabezado de iones vacío que contenga una barra de herramientas de iones vacía en la parte superior de todas sus páginas antes de la etiqueta de contenido, de la siguiente manera:

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

Al hacerlo, el "encabezado global" se superpondrá al encabezado de la página y el contenido comenzará justo después.

Luego, puede administrar todo el código para sus controles de encabezado global en su archivo app.component.ts .

Supongo que podría haber algún comportamiento extraño si el encabezado principal tiene una altura mayor que la altura de la barra de herramientas "estándar", pero con un buen CSS debería poder solucionarlo.

Además, esta solución funciona bien con un menú lateral.

¡Espero eso ayude!