web-dev-qa-db-ja.com

Ionic 2-アプリのグローバルNavBar

Ionic 1）では、<ion-nav-bar>の上に<ion-nav-view>を定義する機能があります。これは、アプリ全体の汎用ナビゲーションバーとして機能し、オフにすることができますビューごとに（ionNavViewのhideNavBar=true|falseを使用します。

Ionic 2ページごとに<ion-nav-bar>を挿入する必要があります-アプリ全体のグローバルナビゲーションバーを持つことはできません。それは正しいですか、それともトリックがありませんか？

もしそうなら-それは多くの重複したコードのように見えますか？

また、NavBarが独自の戻るボタンを作成する機能を持たないようです。また、ページごとに戻るボタンの独自のマークアップを記述する必要があります。 。

angulartypescriptionic-frameworkionic2ionic3
28
keldar

[〜＃〜] update [〜＃〜]：

@mhartingtonが言うように：

グローバルイオンナビゲーションバーを作成する方法はありません、これは意図的に行われるためです。コンポーネントごとにnavbarを定義することのポイントは、タイトル、navbarの背景色（変更する場合）を適切にアニメーション化し、必要な他のプロパティをアニメーション化できるようにすることです。

_ion-navbar_ htmlコードの重複を避けるためのカスタムディレクティブの作成について：

それでも、angular2コンテンツの投影方法のエラーが発生します。人々がこれを試してみるときに未解決の問題がいくつかあります最良の答えはしないことです.

推奨されない解決策：

大量のコードの重複を避けるために、navbar用の独自のカスタムコンポーネントを作成できます。

このコードで_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を追加する場合（デフォルトのテンプレートを変更せずに、作成ボタンを表示）、navbar要素を追加するだけです（カスタムコンポーネントにselectorプロパティ）：

_<navbar></navbar>

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

作成ボタンを非表示にしたい場合（または必要に応じてnavbarを変更した場合）、ページは次のようになります。

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

ionic 3+

これを解決するために行ったことは、単にカスタムコンポーネントを使用することでした。

ionic generate component navbar
  • 関連するnavbar htmlをコンポーネントテンプレートに追加します
  • コンポーネントの.tsファイルに他の機能を追加します
  • セレクタを関連するものに変更します（上記のコマンドを使用する場合は、デフォルトで 'navbar'になります。
  • また、コンポーネントをapp.module.ts宣言に追加します

次に、任意のページテンプレートで、単にカスタム要素として使用します。

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

Ionic 4+アプリ（@ ionic/angular 4.6.2）を作成する際に同様の問題がありました。ヘッダーにログインボタンと他のグローバルなものを追加したかったのです。

これは非常に簡単な方法で実現できます。

ion-headerを追加するだけで、ion-toolbarを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-toolbarを含む空のion-headerを追加するだけです次のようなタグ：

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

これを行うと、「グローバルヘッダー」がページヘッダーにオーバーレイされ、コンテンツはその直後に始まります。

次に、app.component.tsファイルでグローバルヘッダーコントロールのすべてのコードを管理できます。

メインヘッダーの高さが「標準」ツールバーの高さよりも大きい場合、奇妙な動作になる可能性がありますが、一部の素敵なCSSを使用すると、それを修正できるはずです。

さらに、この回避策はサイドメニューで正常に機能します。

それが役に立てば幸い！

2
jmwfr

私はこれが不可能であることを発見しました。これを達成する唯一の方法は、<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>
0
keldar