30

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

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

もしそうなら、多くの重複したコードのように見えますか?

また、NavBar が独自の戻るボタンを作成する機能を持っていないようであり、(ページごとに) 戻るボタンの独自のマークアップを自分で作成する必要がありますが、これも多くのコードの重複のようです。 .

4

4 に答える 4

22

更新：

@mhartingtonが言うように：

これは意図的に行われるため、グローバルな ion-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(プロパティでカスタム コンポーネントにバインドされ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;
    }
}
于 2016-06-14T10:07:11.080 に答える
0

それ以来、これは不可能であることがわかりました。これを実現する唯一の方法は<ion-navbar>、戻るボタンを自動的に処理する and を提供することです。

例えば：

<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>
于 2016-04-20T13:59:15.250 に答える