Ionic-framework: モーダル内をナビプッシュするときにステータスバーのパディングなし（iOSの場合）

ここで同じ問題。 新しいページをプッシュするのではなく、2番目のモーダルとして提示することで解決しました。

皆さんこんにちは！ Ionic！をご利用いただきありがとうございます。 RC0ではこの問題を再現できなくなったことを報告できてうれしいです。 ありがとう！

このバグはまだ存在します。 この問題は、実際のデバイス/エミュレーターでのみ再現できます。 {statusbarPadding：true}をIonicModule.forRoot(MyApp, config)変数に渡さない限り、デスクトップブラウザには表示されません。 RC0https ：//github.com/msalcala11/modal-padding-bugでこの問題を示すためのクイックリポジトリを作成しました

ここで同じ問題。

この問題も確認できます

はい、この問題はまだ存在します。 再開してください

モーダルをより適切に文書化する必要があります。現在、これに取り組んでいる人々がいます。
@comfortme @royipressburger @CyrisXD @ msalcala11 @zmbcアプリでナビゲーションを行うのと同じように、モーダル内でナビゲーションを行うには、新しいイオンナビゲーションを作成する必要があります。

@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
})
export class NavigationModal {
  root = ModalFirstPage;
}

// YOUR CONTENT MODAL
@Component({})
export class ModalFirstPage {
}

(...)

  presentModalChildNav() {
    this.modalCtrl.create(NavigationModal).present();
  }

これはまだ私には本当に意味がありません。

ユーザーがアプリ内のどこにいるかに応じて、別のページまたはモーダルから移動するページがあります。

モーダル内でnav.pushを実行すると、ページに移動します。すべてが正常に遷移し、希望どおりに機能します。 モーダルからページに移動したときにステータスバーのパディングが適用されないことを除いて。

上記のコードスニペットがどのように役立つのか、実際にはわかりません。 機能的にはすべてが機能しており、以前のベータ版の1つではステータスバーのパディングも正しく適用されていたため、これは本当に単純なことのようですが、後のリリースで再び壊れました。

androidは、別のページまたはモーダルからナビゲートする同じコードで問題がないことに注意してください。すべてが正しくフォーマットされ、正常に動作します。iosは同じであると思います。

まだ存在しています。 これを防ぐための簡単なハックはありますか？

これを修正するには、次のCSSをion-navbarとion-titleに適用します。 ngIf *を使用して、androidがこれを必要としないため、platform.is（iOS）の場合にのみ適用します。 これは、iOSの別のページから開くときに、デフォルトのcssによって単純にオーバーライドされるため、問題も発生しません。

また、新しくプッシュされたページから開いたアラート/アクションシート/ポップオーバーは、ページの後ろで開くことに注意してください。 これらのコンポーネントのz-index値をハックして、モーダルz-indexよりも高くし、常に最上位になるようにする必要があります。 とにかくそれらのものが常に上にあるべきであることを考えると、それは実際には問題ではありません。

<ion-navbar *ngIf="globals.isIos" style="height:calc(44px + 20px); min-height:calc(44px + 20px); padding-top:20px;">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title style="padding-top:14px !important;">{{selectedItem.name}}</ion-title>
  </ion-navbar>

まだこの問題があります。 これはすぐに修正されますか？

@mrhirschここにも同様の問題があり@ manucorporatは、私が提供したレポの例を求めたので、彼らがそれに取り組んでいることを願っています。

@ ghenry22

そのパディングを行う方法は良い方法ではありません。 プラットフォームタイプに基づいてナビゲーションバーを非表示にするために*ngIfを使用しないでください。 その後のion-contentの計算では、ナビゲーションバーが考慮されず、 ion-content全体がシフトアップします。

代わりに、 app.scssに次のCSSを追加します。

.platform-ios .ios-header {
  height:calc(56px + 20px);
  min-height:calc(56px + 20px);
  padding-top:20px;
}

次に、これが必要なヘッダーに単純に（私にとっては、タブページにプッシュするすべてのページです）、 class="ios-header"追加するだけです。

<ion-header>
  <ion-navbar class="ios-header">
  </ion-navbar>
</ion-header>

多くの乾燥機、そしてion-content問題なし。 もちろん、Ionicチームがこれを自分で調べた場合、この苦痛を経験する必要はありません。

ポップオーバーでこれにつまずいている人にとって、これは同じ問題です。

解決策について：CSS修正アプローチを採用することはお勧めできません。これは、設計どおりに実行していないことをマスクしているだけだからです（少し奇妙な設計であっても）。

manucorporatが指摘している以外の解決策は、イベントを処理することです。 私はそのようにそれをしました、そしてそれはとてもシンプルできれいです。 モーダルページまたはポップオーバーページでイベントを発生させ、「親」ページでそれを聞くだけです。 イベントの詳細については、 https ：

@timvandijck例を挙げていただけますか？

@ kabus202これはポップオーバーの例です：

ポップオーバーを起動するページ：

@Component({
    selector: 'page-my-page',
    templateUrl: 'my-page.html'
})
export class MyPage {
    popover = null;

    constructor(public navCtrl:NavController, public popoverCtrl: PopoverController, public events: Events) {
        this.events.subscribe('nav:my-other-page', () => {
            this.navCtrl.setRoot(MyOtherPage);

            if (this.popover) {
                this.popover.dismiss();
            }
        })
    }

    toggleActionsMenu(event) {
        this.popover = this.popoverCtrl.create(PopoverContentPage);
        this.popover.present({
            ev: event
        });
    }
}

ポップオーバーのコンテンツを含むページ：

@Component({
    selector: 'page-popover-content',
    templateUrl: 'popover-content.html'
})
export class PopoverContentPage {

    constructor(public events: Events) {
    }

    registerAppliance() {
        this.events.publish('nav:my-other-page');
    }
}

ええ、これはまだ問題です。 また、スワイプして元に戻そうとすると、モーダルの下に表示が表示されることがあります。 @ jgw96

イオン角度3.3.0にはまだ存在します。 それを修正する方法はありますか？

@manucorporatこの問題を再開して

はい、もう一度開いてください

@vosecek問題は存在しますが、上記で投稿したcss修正を使用できます。 3.3で動作します。

やあみんな、 NavController API 、特にオーバーレイコンポーネントからのナビゲートというタイトルのセクションをチェックしてください（以下に貼り付けられています）

this.appCtrl.getRootNav()の使用に注意してください。 これは私にとって非常にうまくいったので、 Appを使用して他の人のためにこの問題を修正するかどうか興味があります。 とにかく、みんながこれについて知っているべきだと思っただけです。

オーバーレイコンポーネントからのナビゲート

import { Component } from '@angular/core';
import { App, ViewController } from 'ionic-angular';

@Component({
    template: `
    <ion-content>
      <h1>My PopoverPage</h1>
      <button ion-button (click)="pushPage()">Call pushPage</button>
     </ion-content>
    `
  })
  class PopoverPage {
    constructor(
      public viewCtrl: ViewController
      public appCtrl: App
    ) {}

    pushPage() {
      this.viewCtrl.dismiss();
      this.appCtrl.getRootNav().push(SecondPage);
    }
  }

問題は、nav.pushだけで、誰も修正に興味がないように見えるCSSを除いて、すべてが完全に正常に機能するのに、なぜ頭上に多くを追加するのかということだと思います。

それは、アンテナの問題に対するAppleの「異なる方法で保持する」応答を思い出させます。

この問題がまだ発生しているのに、なぜこの問題が解決されるのですか？

@edwinchoateこれは機能しますが、ページから戻ったときにポップオーバーをアクティブにする必要がある場合は機能しません。 現在のデザインの通常のページのようにポップオーバーに移動して戻ることはできないと思います。ポップオーバーはすべての通常のページよりも高いレイヤーに配置されているため、閉じる必要があります。 彼らがポップオーバーの振る舞いを完全に変えない限り。

このバグは修正されていないので、回避策としてこのSCSSコードを追加しましたが、うまくいきました。 お役に立てば幸いです。

.toolbar-ios {
  height: 44px + $cordova-ios-statusbar-padding;
  padding-top: $cordova-ios-statusbar-padding;
}

.toolbar-title-ios {
  padding-top: $cordova-ios-statusbar-padding;
}

まだこれにつまずいているすべての人々に。 @manucorporatはすでに正しいアイデアを提示しました。 コードにエラーがあり、やや不完全です。 私はこれをIonic 3.6.0テストしました。

モーダルとして表示するコンテンツページに、次のようなnav要素を持つ別のラッパーページクラスを含めるだけです。

@Component({
    template: '<ion-nav [root]="this.rootPage" [rootParams]="this.rootParams"></ion-nav>'
})
export class MyModalWrapper {
    private rootPage = MyModalContentPage;
    private rootParams;
    constructor(navParams: NavParams, private viewCtrl: ViewController) {
        this.rootParams = navParams;
        this.rootParams["data"]["closeModal"] = this.onCloseModal
    }
    onCloseModal = () => {
        this.viewCtrl.dismiss();
    }
}

次に、コンテンツページクラスを次のように変更します。

@Component({ /* ... */ })
export class MyModalContentPage {
    /* ... */
    private closeModal;
    constructor(navParams: NavParams, /* ... */) {
        this.closeModal = navParams.get("closeModal");
    }
    /* ... */
}

これで、クラスまたはテンプレートの通常の関数のようにcloseModalを呼び出すことができます。

あとは、モーダルを作成して提示する場所でMyModalContentPageをMyModalWrapper置き換えるだけです。 したがって、代わりに：

this.modalCtrl.create(MyModalContentPage, { /* ... */ }).present();

これを行う：

this.modalCtrl.create(MyModalWrapper, { /* ... */ }).present();

お役に立てれば。

@codemusings私はそれをこのようにした：

@Component({
  template: '<ion-nav [root]="root" [rootParams]="params"></ion-nav>'
})
export class MyModalWrapper {
  root = MyModalContentPage;
  params: any;

  constructor(
    public navParams: NavParams,
    viewCtrl: ViewController,
  ) {
    this.params = Object.assign({}, navParams.data, {viewCtrl: viewCtrl});
  }
}

@Component({ /* ... */ })
export class MyModalContentPage {
    /* ... */
    private viewCtrl: ViewController;
    constructor(navParams: NavParams, /* ... */) {
        this.viewCtrl = navParams.get('viewCtrl');
    }
    /* ... */
    someFunc() {
      this.viewCtrl.dismiss();
    }
}

ViewController全体を渡すことで、通常使用するのと同じthis.viewCtrl.dismiss()を使用できます。 コンストラクターを除いて、コンテンツページを変更する必要はありません。

私はIonic 3.3.0いますが、最新のものでも機能すると思います。

しかし、問題は、機能的にはそのままで完全に正常に機能し、余分なコードをすべて必要とせず、iOS専用の1行のCSS修正だけであり、これも問題ではありません。

@ ghenry22これは、モーダルが小さくてもプッシュされたページがフルスクリーンであるiPadなどの大画面では完全には正しくありません。

モーダルJustWorked内のnav.pushを望みます。 しかし、私は、よりハッキーなCSS修正に依存するよりも、このより複雑な方法でそれを実行したいと思います。

@ ghenry22 @zmbc nav-viewは、モーダルを開くときに作成する個別のnavスタックを意味します。 これが「道」です。

navCtrl.popを呼び出すと、Ionicはモーダルになっているときとそうでないときを理解できないため、ルートナビゲーションに不注意な問題が発生する可能性があります。

iOSでプッシュされたページにも問題はありませんか？ 確認のために言及したので、もう一度テストしますが、それらは私にとってモーダルの範囲内にとどまります。

基本的に、モーダル内からページをプッシュまたはポップすると、モーダル内でページが読み込まれ、バインドされることが期待されます。

通常のページを押したりポップしたりすると、通常のフルスクリーンページで読み込まれると思います。

どちらのシナリオでも使用できるページがあるため、一方のシナリオを処理するコードを追加すると、もう一方のシナリオで問題が発生する可能性があります。

モーダル内のプッシュされたページをiPadで全画面表示にしたい場合は、モーダルを閉じてからページをプッシュする機能が必要になると思いますが、これは確かに少し厄介になる可能性があります。

@wbhobこれは望ましい結果かもしれませんが、あなたがしなければならないのは、このチケットとイオンフォーラムとスタックオーバーフローを見て、同じ質問が何度も

したがって、明らかに、それは人々の純粋なユーザビリティの観点からの問題です。 ionicが内部で何かを実装して「正常に機能する」ようにできれば、このクローズされた問題に関するすべてのコメントとリクエストが停止するのは素晴らしいことです:)

ドキュメント@ ghenry22にPRを

私のPRが統合されました！ モーダルドキュメントを確認してください

@ jgw96これがIonic4で解決されることを願っています。 ionic2 RC0は、アクションがなく、単純なCSS修正であることを考えると少し衝撃的であり、モーダルページでも通常のページでも、ナビゲーションの使用は期待どおりに機能するため、優れています。 当然のことながら。

期待どおりに機能しますが、問題ではありません。 Ionicドキュメントにこれを行うための詳細があります（私はドキュメントのその部分を書きました）

@wbhobは、期待どおりに機能しないことを除いて。 フォーラムの多数のスレッドで示されているように。 こことスタックオーバーフローの問題。

ナビゲーションは、プッシュされたページがパディング時にステータスを失うことを除いて、期待どおりに機能します。 これは単純なcss修正であり、これ以上複雑なものは必要ありません。

推奨される回避策やその他の回避策には、新しいページを開く前にオーバーレイを閉じることが含まれます。 ユーザーがモーダルまたは他の通常のページから情報を表示できるようにしたいので、これは私のアプリにとって実行可能なアプローチではありません。モーダルから表示する場合は、モーダルに戻ることができるようにします。

とにかく、私はこれに対するcssのみの修正を、先日ログに記録された他の問題の1つに投稿しました。これにより、非モーダル設定の場合と同じように、標準のイオンページスタイルを適用するだけで完全に解決されました。

これを行う適切な方法は、モーダル内に自己完結型のナビゲーションインスタンスを作成することです。 あなたの意図は追加のページに移動することですが、navCtrl.pushを呼び出すと、予想どおり、ルートナビゲーションスタックに対して実行されます。 それを適切に行い、ナビゲーションスタックをモーダル専用にすると、正しく機能します。

はい、それは特定のシナリオでそれを行う方法です。 ユースケースで、開いているオーバーレイ（モーダル/ポップオーバーなど）を閉じてから、ページを開くと仮定します。 このシナリオでは、はい、あなたが言ったことと、navコントローラーのIonicコンポーネントのドキュメントに示されていることは正常に機能します。

開いているモーダルを閉じたくありません。追加情報が表示されるページに移動できるようにします。完了したら、[戻る]をクリックしてページを開いたモーダルに戻ります。 このシナリオは、参照するドキュメントではカバーされていません。

2番目のシナリオでは、すべてが機能的に完全に機能します。 Androidではすべてが問題なく動作します。 唯一の問題は、IOSでは、オーバーレイからプッシュされたときに、プッシュされたページに正しいcssクラスのみが適用されないことです。 これには簡単なCSS修正があります。

フォローをapp.scssに貼り付けるだけで、モーダルページまたは別の通常のページからプッシュされたかどうかに関係なく、正しいクラスがページに適用されるようになります。

これで、両方のシナリオがうまく機能します。
1）オーバーレイを閉じて新しいページをロードする場合は、navcontrollerドキュメントのメソッドを使用します。
2）オーバーレイを閉じて新しいページをロードしたくない場合は、戻ることができ、ソースオーバーレイを引き続き使用できます。以下のcssを含めるだけで、レイアウトの問題が解決されます。

// handle top padding disappearing in modals
<strong i="12">@media</strong> only screen and (max-width: 767px){
    .ios > .ion-page > ion-header > .toolbar.statusbar-padding:first-child {
        padding-top: calc(20px + 4px);
        padding-top: calc(constant(safe-area-inset-top) + 4px);
        padding-top: calc(env(safe-area-inset-top) + 4px);
        min-height: calc(44px + 20px);
        min-height: calc(44px + constant(safe-area-inset-top));
        min-height: calc(44px + env(safe-area-inset-top));
        }
}

@ ghenry22あなたは間違っていると思います。 Ionicアプリケーションで推奨ソリューションを使用していますが、モーダルは却下されません。 新しいページをモーダルスタックにプッシュし、ユーザーが[戻る]をタップするとモーダルに戻ります。

推奨される解決策でその動作が見られない場合は、アプリに何らかのバグがあると思います。 もし私があなたなら、StackOverflowの質問を開いてデバッグを試みます。 そこにいる誰かがあなたがそれを理解するのを手伝ってくれるでしょう。

この機能はすでにIonicにあり、一般的な使用のために十分に文書化されているため、この問題は適切な場所ではありません。

@zmbc https://ionicframework.com/docs/api/navigation/NavController/
オーバーレイからナビゲートするためのここにあるドキュメントは、次のページにナビゲートする前にdismiss（）が呼び出されていることを示しています。 これは私が言及していたものです。

古いPRログを調べてみると、

それでも、正しいCSSクラスが（Androidのように）適用されている場合は、回避策やユーザーからの追加コードは必要ありません。確かに、これは望ましい結果でしょうか？

@ ghenry22私はもうプロジェクトに必ずどこドキュメントの生活ではないんだけど、私は（彼らがにあるであろうが、@wbhobの変更がもはや存在していること、あなたがしている正しいと思うModalController 、ないからNavController ）。

前に

このアプローチをこれは明らかにIonicの問題ではありません。

@zmbcは、ナビゲーションに使用される

CSSがあいまいであることに同意しません。これは、通常プッシュされたときにページに適用される標準のイオンCSSです。イオンに大きな変更があった場合（V4が登場するなど）、動作を停止したり、問題を引き起こしたりする可能性があることに同意します。 ）これが、IonicのiOSプラットフォームに影響を与えるバグとして修正する必要がある理由です。これにより、修正を適用する必要がなくなります。

この問題はAndroidには存在せず、変更なしで完全に機能します。 したがって、これは、CSSクラスを適用するイオンに関するプラットフォーム固有のバグのようです。

私はまだ大画面デバイスでそれをテストしていないことを認めます、そしてそこで何か他のものが必要であるかもしれません、私はそれを見ていきます。

ドキュメントから失われ、ソースファイルのヘッダーにコメントとしてのみ存在する解決策があることがわかります。 このソリューションを公式のナビゲーションコントローラーのドキュメント、モーダルからのナビゲートのセクションに復元できる場合は、少なくともドキュメント化されたソリューションがあり、Ionicドキュメントを読んでいる人はドキュメントに簡単にアクセスできます。

どちらのアプローチが正しいか間違っているかについては明らかに同意しません。そのため、これを行うための公式に推奨される方法（それが何であれ）がドキュメントに適切に追加されている限り、それは別にして、それで十分です。

問題をありがとう！ この問題は、元の問題に関連しないコメントを防ぐためにロックされています。 これが最新バージョンのIonicで引き続き問題になる場合は、新しい問題を作成し、テンプレートが完全に入力されていることを確認してください。