Ionic 2 - глобальный NavBar для приложения

Ответ 1

UPDATE

Так же, как @mhartington говорит:

Невозможно создать глобальный ион-навигатор, поскольку это делается на цель. Точка наличия навигационной панели, определенной для каждого компонента, что мы можем правильно анимировать заголовки, цвет фона навигация (если вы их изменяете) и оживить другие необходимые свойства.

И о создании пользовательской директивы, чтобы избежать дублирования кода ion-navbar html:

Это будет по-прежнему создавать ошибки с тем, как angular2 контентная проекция работает. У нас есть несколько проблем, которые были открыты, когда люди и лучший ответ - не делать этого.

НЕ рекомендуемое решение:

Чтобы избежать дублирования большого количества кода, вы можете создать свой собственный пользовательский компонент для навигационной панели.

Создайте navbar.html с помощью этого кода:

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

И затем в 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' });
    }
}

Объявив hideCreateButton как input Component, вы можете решить, на каких страницах указывается эта кнопка и в которой они не должны быть видимыми. Таким образом, вы можете отправить информацию, чтобы сообщить компоненту, как это должно быть, и настроить его для каждой страницы.

Итак, если вы хотите добавить навигационную панель на странице (без изменения шаблона по умолчанию, поэтому, показывая кнопку создания), вам просто нужно добавить элемент navbar (привязанный к нашему пользовательскому компоненту нами в selector имущество):

<navbar></navbar>

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

И если вы хотите скрыть кнопку создания (или изменить навигационную панель, как вы хотите), ваша страница будет выглядеть следующим образом:

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

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

И помните, что hideButton() должен быть определен в вашем customPage.ts следующим образом:

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

Ответ 2

Для ионных 3 +

Что я сделал для этого, просто использовал пользовательский компонент.

ionic generate component navbar

• Добавьте соответствующий шаблон html на ваш шаблон компонента
• Добавить любые другие функции в ваш файл .ts.
• Измените свой селектор на что-то релевантное (если используется команда выше должен просто по умолчанию "navbar".
• Также добавьте компонент в свои объявления app.module.ts

Затем в любом из ваших шаблонов страниц просто используйте его как пользовательский элемент например

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

Ответ 3

С тех пор я узнал, что это невозможно. Единственный способ добиться этого - предоставить <ion-navbar> и автоматически обрабатывать кнопку "Назад".

например:.

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

Ответ 4

У меня была похожая проблема при создании приложения Ionic 4+ (@ionic/angular 4.6.2), я хотел добавить кнопку входа и некоторые другие глобальные элементы в шапку.

Вы можете достичь этого довольно простым способом.

Просто добавьте ионный заголовок, содержащий ионную панель инструментов, в ваш app.component.html в качестве глобального заголовка, например:

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

Проблема здесь в том, что "глобальный заголовок" будет перекрывать содержимое любой страницы, если вы сделаете только это. Поэтому есть обходной путь: просто добавьте пустой заголовок ion, содержащий пустую панель инструментов ion поверх всех ваших страниц перед тегом содержимого, как показано ниже:

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

При этом "глобальный заголовок" будет перекрывать верхний колонтитул страницы, и контент начнется сразу после него.

Затем вы можете управлять всем кодом для ваших глобальных элементов управления заголовком в файле app.component.ts.

Я предполагаю, что может быть странное поведение, если высота основного заголовка превышает "стандартную" высоту панели инструментов, но с хорошим CSS вы сможете это исправить.

Кроме того, этот обходной путь отлично работает с боковым меню.

Надеюсь, поможет!