Ionic-framework: Tidak ada bantalan untuk bilah status (di iOS) saat mendorong nav di dalam modal

masalah yang sama di sini. saya menyelesaikannya dengan tidak mendorong halaman baru tetapi menyajikannya sebagai modal kedua.

Halo semua! Terima kasih telah menggunakan Ionic!. Saya senang melaporkan bahwa saya tidak dapat lagi mereproduksi masalah ini dengan RC0. Terima kasih!

Bug ini masih ada. Masalah ini hanya dapat direproduksi pada perangkat/emulator yang sebenarnya. Itu tidak akan muncul di browser desktop kecuali Anda meneruskan { statusbarPadding: true } ke variabel konfigurasi IonicModule.forRoot(MyApp, config) . Saya telah membuat repo cepat untuk menunjukkan masalah ini dengan RC0 https://github.com/msalcala11/modal-padding-bug.

Masalah yang sama di sini.

Dapat mengkonfirmasi masalah ini juga

ya masalah ini masih ada. tolong buka kembali

Kami harus mendokumentasikan modals dengan lebih baik, kami memiliki orang-orang yang mengerjakan ini sekarang.
@comfortme @royipressburger @CyrisXD @msalcala11 @zmbc Anda harus membuat ion-nav baru untuk memiliki navigasi di dalam modal, seperti yang Anda lakukan untuk memiliki navigasi di aplikasi Anda.

@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();
  }

ini masih tidak masuk akal bagi saya.

Saya memiliki halaman yang akan saya navigasikan dari halaman lain ATAU dari modal tergantung di mana pengguna berada di aplikasi.

Ketika saya melakukan nav.Push di dalam modal, ia masuk ke halaman, semuanya bertransisi dengan baik dan berfungsi persis seperti yang saya inginkan. KECUALI bahwa bantalan bilah status tidak diterapkan ketika saya menavigasi ke halaman dari modal.

Saya tidak benar-benar melihat bagaimana cuplikan kode di atas membantu saya dengan itu sama sekali? Sepertinya ini harus menjadi hal yang sangat sederhana karena secara fungsional semuanya berfungsi DAN di salah satu beta sebelumnya, padding statusbar juga diterapkan dengan benar tetapi ini kemudian rusak lagi di rilis selanjutnya.

Perhatikan bahwa Android tidak memiliki masalah dengan kode yang sama, navigasi baik dari halaman lain atau dari modal semua diformat dengan benar dan berfungsi dengan baik, saya berharap ios sama.

Masih ada. Adakah peretasan sederhana untuk mencegah hal ini?

Terapkan CSS berikut ke ion-navbar dan ion-title untuk memperbaikinya. Saya menggunakan ngIf* untuk hanya menerapkannya jika platform.is(iOS) sebagai Android tidak membutuhkan ini. Ini hanya ditimpa oleh css default saat membuka dari halaman lain di iOS jadi tidak ada masalah di sana juga.

Perhatikan juga bahwa setiap peringatan / lembar tindakan / munculan yang Anda buka dari halaman yang baru didorong akan terbuka di belakang halaman. Anda perlu meretas nilai z-index agar komponen tersebut lebih tinggi dari modal z-index sehingga mereka selalu di atas. Mengingat bahwa hal-hal itu harus selalu di atas, itu tidak terlalu menjadi masalah.

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

Masih mengalami masalah ini. Apakah ini akan segera diperbaiki?

@mrhirsch Ada masalah serupa di sini . Coba lihat. Itu tidak diperbaiki, tetapi @manucorporat meminta contoh repo yang saya berikan di sana, jadi semoga mereka sedang mengerjakannya.

@ghenry22

Cara Anda melakukan padding itu bukan cara yang baik. Jangan gunakan *ngIf untuk menyembunyikan navbar berdasarkan tipe platform. Perhitungan untuk ion-content selanjutnya tidak akan memperhitungkan navbar dan akan menyebabkan seluruh ion-content bergeser ke atas.

Sebagai gantinya, di app.scss , tambahkan CSS berikut.

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

Kemudian cukup di tajuk yang Anda butuhkan ini (bagi saya, itu semua halaman tempat saya mendorong ke halaman Tab), cukup tambahkan class="ios-header" .

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

Banyak KERING, dan tanpa masalah ion-content . Tentu saja, jika Tim Ionic melihat sendiri hal ini, kita tidak harus melalui rasa sakit ini.

Bagi siapa saja yang tersandung pada ini dengan popover, ini adalah masalah yang sama.

Mengenai solusinya: bukan ide yang baik untuk menggunakan pendekatan perbaikan CSS karena Anda hanya menutupi sesuatu yang tidak Anda lakukan seperti yang dirancang (bahkan jika itu sedikit desain yang aneh).

Solusi lain selain yang ditunjukkan manucorporat adalah bekerja dengan acara. Saya melakukannya seperti itu dan itu sangat sederhana dan bersih. Cukup jalankan acara di halaman modal atau popover Anda dan dengarkan di halaman "induk" Anda. Lebih lanjut tentang acara dapat ditemukan di sini: https://ionicframework.com/docs/api/util/Events/

@timvandijck Bisakah Anda memberikan contoh?

@ kabus202 ini adalah contoh dengan popover:

Halaman tempat Anda meluncurkan popover:

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

Halaman yang berisi konten popover:

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

    constructor(public events: Events) {
    }

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

Ya, ini masih menjadi masalah. Juga, ketika Anda mencoba menggesek untuk kembali, kadang-kadang dapat bertindak dan memunculkan tampilan di bawah modal. @jgw96

Masih ada di ionic-angular 3.3.0. Ada cara untuk memperbaikinya?

@manucorporat Bisakah Anda membuka kembali masalah ini? Buka modal di halaman yang dibuka oleh navController.push() menyebabkan situasi yang sama seperti yang digambarkan di posting pertama.

Ya silahkan buka kembali

@vosecek Masalahnya ada, tetapi Anda dapat menggunakan perbaikan css saya yang saya posting di atas. Ia bekerja dengan 3.3.

Hai teman-teman, lihat NavController api , khususnya bagian berjudul Navigating from an Overlay Component (ditempel di bawah)

Perhatikan penggunaan this.appCtrl.getRootNav() . Ini bekerja sangat baik untuk saya, jadi saya ingin tahu apakah menggunakan App memperbaiki masalah ini untuk orang lain. Anyways, hanya berpikir kalian harus tahu tentang ini.

Menavigasi dari Komponen Overlay

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

Saya kira pertanyaannya adalah mengapa Anda menambahkan begitu banyak di atas kepala ketika Anda hanya dapat nav.Push dan semuanya berfungsi dengan baik kecuali sedikit CSS yang sepertinya tidak ada yang tertarik untuk memperbaikinya?

Ini semacam mengingatkan saya pada respons Apel "pegang saja secara berbeda" terhadap masalah antena.

Mengapa masalah ini ditutup jika masih ada?

@edwinchoate ini berfungsi tetapi tidak ketika Anda masih membutuhkan popover untuk aktif ketika Anda kembali dari halaman. Saya tidak berpikir itu mungkin untuk menavigasi keluar dan kembali ke popover seperti halaman normal dengan desain saat ini, popover diposisikan pada lapisan yang lebih tinggi dari semua halaman normal, jadi diperlukan pemberhentian. Kecuali jika mereka mengubah perilaku popover sama sekali.

Karena bug ini belum diperbaiki, saya telah menambahkan kode SCSS ini sebagai solusi dan berhasil untuk saya. Saya harap ini berguna untuk Anda:

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

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

Untuk semua orang yang masih tersandung ini. @manucorporat sudah mempresentasikan ide yang tepat. Kode hanya memiliki kesalahan dan agak tidak lengkap. Saya telah menguji ini dengan Ionic 3.6.0 .

Di halaman konten yang Anda sajikan sebagai modal cukup sertakan kelas halaman pembungkus lain dengan elemen nav seperti ini:

@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();
    }
}

Dan kemudian ubah kelas halaman konten Anda seperti ini:

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

Sekarang Anda dapat memanggil closeModal seperti fungsi normal di kelas atau template Anda.

Sekarang yang tersisa untuk dilakukan adalah mengganti MyModalContentPage dengan MyModalWrapper mana pun Anda membuat dan menampilkan modal. Jadi alih-alih:

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

melakukan hal ini:

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

Semoga ini membantu.

@codemusings saya melakukannya dengan cara ini:

@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();
    }
}

Dengan meneruskan seluruh ViewController Anda dapat menggunakan this.viewCtrl.dismiss() yang sama dengan yang biasa Anda gunakan; tidak ada perubahan di halaman konten yang diperlukan kecuali di konstruktor.

Saya menggunakan Ionic 3.3.0 tetapi saya kira itu akan berfungsi pada yang terbaru juga.

Tapi masalahnya, secara fungsional itu berfungsi dengan baik apa adanya dan tidak perlu untuk semua kode tambahan itu, hanya satu baris perbaikan CSS untuk iOS saja dan ini bahkan bukan masalah.

@ghenry22 Itu tidak sepenuhnya benar untuk layar besar, misalnya iPad, di mana halaman yang didorong adalah layar penuh meskipun modalnya kecil.

Saya berharap nav.push di dalam modal Just Work. Tapi saya lebih suka melakukannya dengan cara yang lebih rumit ini daripada mengandalkan perbaikan CSS yang lebih hackier.

@ghenry22 @zmbc Tampilan nav menyiratkan tumpukan nav terpisah, yang Anda buat saat membuka modal. Ini adalah "jalan".

Saat Anda memanggil navCtrl.pop, itu dapat membuat masalah yang tidak disengaja dengan root nav, karena Ionic tidak mengerti kapan Anda berada dalam modal dan kapan Anda tidak.

Saya juga tidak punya masalah dengan halaman yang didorong di iOS? Maksud saya, saya akan mengujinya lagi sekarang setelah Anda menyebutkannya untuk memastikan tetapi mereka tetap dalam batas modal untuk saya.

Pada dasarnya jika saya mendorong atau memunculkan halaman dari dalam modal, saya berharap itu memuat dan terikat di dalam modal.

Jika saya mendorong atau memunculkan halaman normal, saya berharap itu dimuat dengan halaman layar penuh normal.

Saya memiliki halaman yang dapat saya gunakan di salah satu skenario sehingga menambahkan kode untuk menangani satu skenario dapat menyebabkan masalah di skenario lainnya.

Jika Anda ingin halaman yang didorong di dalam modal untuk membuka layar penuh di ipad maka saya kira Anda harus memiliki fungsi yang menutup modal dan kemudian mendorong halaman yang pasti bisa sedikit berantakan.

@wbhob ini mungkin hasil yang diinginkan tetapi yang harus Anda lakukan adalah melihat tiket ini dan forum ionik dan stack overflow untuk melihat pertanyaan yang sama ditanyakan berulang kali.

Jadi jelas ini adalah masalah dari sudut pandang kegunaan murni bagi orang-orang. Akan lebih bagus jika ionic dapat mengimplementasikan sesuatu di bawah tenda sehingga "hanya berfungsi" maka semua komentar dan permintaan pada masalah tertutup ini akan berhenti :)

Membuat PR ke dokumen @ghenry22

PR saya digabungkan! Periksa dokumen modal

@ jgw96 Saya berharap ini akan diselesaikan dengan Ionic4. Sudah luar biasa sejak ionic2 RC0 tanpa tindakan yang sedikit mengejutkan mengingat ini adalah perbaikan CSS sederhana dan kemudian menggunakan navigasi hanya berfungsi seperti yang diharapkan apakah Anda berada di halaman modal atau biasa. Seperti seharusnya.

Ini berfungsi seperti yang diharapkan, itu bukan masalah. Ada detail tentang melakukan ini di dokumen Ionic (saya menulis bagian dari dokumen itu)

@wbhob kecuali itu tidak berfungsi seperti yang diharapkan. Seperti yang ditunjukkan oleh banyak utas di forum. Masalah di sini dan di stack overflow.

Navigasi bekerja persis seperti yang Anda harapkan dengan pengecualian bahwa halaman yang didorong kehilangan statusnya pada padding. Ini adalah perbaikan css sederhana dan tidak memerlukan sesuatu yang lebih rumit.

Pekerjaan yang Anda rekomendasikan dan lainnya melibatkan penutupan overlay sebelum membuka halaman baru. Ini bukan pendekatan yang layak untuk aplikasi saya karena saya ingin pengguna dapat melihat beberapa informasi baik dari modal ATAU dari halaman reguler lainnya dan jika melihat dari modal, saya ingin mereka dapat kembali ke modal.

Pokoknya saya memposting perbaikan hanya css untuk ini ke salah satu masalah lain yang dicatat untuk ini beberapa hari yang lalu yang sepenuhnya menyelesaikannya untuk saya hanya dengan menerapkan gaya halaman ion standar karena mereka akan berada dalam pengaturan non-modal.

Cara yang tepat untuk melakukan ini adalah dengan membuat instance navigasi mandiri di dalam modal. Maksud Anda adalah untuk menavigasi ke halaman tambahan, tetapi ketika Anda memanggil navCtrl.push, seperti yang Anda harapkan, menjalankannya terhadap root nav stack karena tidak tahu apa-apa. Ketika Anda melakukannya dengan benar dan membuat nav stack eksklusif untuk modal, itu berfungsi dengan benar.

Ya itu adalah cara melakukannya untuk skenario tertentu. Dengan asumsi bahwa dalam kasus penggunaan Anda, Anda ingin mengabaikan overlay yang terbuka (modal/pop over dll) dan KEMUDIAN buka halaman. Dalam skenario ini, ya apa yang Anda katakan dan apa yang ditampilkan dalam dokumen komponen Ionic untuk pengontrol nav berfungsi dengan baik.

Saya tidak ingin mengabaikan modal yang terbuka, saya ingin dapat menavigasi ke halaman yang akan menampilkan beberapa informasi tambahan, dan setelah selesai klik KEMBALI untuk kembali ke modal tempat halaman dibuka. Skenario ini tidak tercakup dalam dokumen yang Anda rujuk.

Untuk skenario kedua semuanya bekerja dengan sempurna dalam hal fungsionalitas. Semuanya berfungsi tanpa masalah sama sekali di Android. Satu-satunya masalah adalah bahwa pada IOS hanya kelas css yang benar yang tidak diterapkan ke halaman yang didorong saat didorong dari overlay. Ada perbaikan CSS sederhana untuk ini.

Cukup tempelkan mengikuti ke app.scss Anda dan Anda siap melakukannya karena kelas yang benar sekarang akan diterapkan ke halaman apakah mereka didorong dari modal atau halaman reguler lainnya.

Sekarang kedua skenario bekerja dengan baik.
1) ketika Anda ingin mengabaikan overlay dan memuat halaman baru, gunakan metode di dokumen navcontroller.
2) ketika Anda tidak ingin mengabaikan hamparan dan memuat halaman baru yang dapat KEMBALI dan masih memiliki hamparan sumber yang tersedia, cukup sertakan css di bawah ini dan itu menyelesaikan masalah tata letak.

// 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 Saya pikir Anda salah. Saya menggunakan solusi yang direkomendasikan dalam aplikasi Ionic, dan modalnya tidak diberhentikan. Ini mendorong halaman baru ke tumpukan modal, dan ketika pengguna mengetuk "Kembali" mereka kembali ke modal.

Saya pikir aplikasi Anda mungkin memiliki semacam bug jika Anda tidak melihat perilaku itu dengan solusi yang disarankan. Jika saya jadi Anda, saya akan membuka pertanyaan StackOverflow untuk mencoba men-debugnya. Seseorang di sana dapat membantu Anda mengetahuinya.

Masalah ini bukan tempat yang tepat, karena fungsi ini sudah ada di Ionic dan telah didokumentasikan secara memadai untuk penggunaan umum.

@zmbc https://ionicframework.com/docs/api/navigation/NavController/
Dokumen di sini untuk menavigasi dari overlay menunjukkan pemberhentian() dipanggil sebelum menavigasi ke halaman berikutnya. Inilah yang saya maksud.

Menggali log PR lama tampaknya pembaruan yang ditambahkan oleh @wbhob tidak tercermin pada halaman dokumentasi komponen ionik. Saya akan mencoba solusi dari komit lama tetapi jika berfungsi seperti yang Anda katakan, akan lebih baik untuk memasukkan info itu ke dalam dokumen atau contoh API komponen pengontrol nav sehingga sebenarnya dapat ditemukan dengan mudah.

Masih jika kelas CSS yang benar diterapkan (seperti pada Android) maka tidak perlu ada solusi atau kode tambahan dari pengguna, tentunya ini akan menjadi hasil yang diinginkan?

@ ghenry22 Saya tidak yakin lagi di mana dokumentasi tinggal di proyek, tapi saya pikir Anda benar bahwa perubahan @wbhob tidak ada lagi (walaupun mereka akan berada di ModalController , bukan NavController ).

Seperti yang telah saya jelaskan sebelumnya , tidak benar bahwa perbaikan CSS sama bagusnya dengan solusi yang direkomendasikan. Ini hanya setara pada layar kecil di mana modals adalah layar penuh, dan siapa yang tahu apakah itu akan berfungsi di versi Ionic berikutnya? Solusi yang disarankan membuat tumpukan navigasi yang sebenarnya, yang Anda inginkan dalam situasi ini, berfungsi pada semua ukuran layar, dan menggunakan API publik yang terdokumentasi. Ini juga bukan perbedaan besar dalam kompleksitas kode: Saya lebih suka memiliki beberapa baris boilerplate daripada beberapa SCSS yang tidak jelas yang tidak akan dapat saya pahami di masa depan.

Saya sarankan Anda menggunakan pendekatan ini untuk melakukan apa yang Anda inginkan: mendorong halaman pada modal dan memiliki kemampuan untuk kembali ke modal. Jika Anda tidak ingin melakukan itu, terserah Anda. Tapi ini jelas bukan masalah dengan Ionic.

@zmbc dokumentasi akan ada di navController karena itulah yang digunakan untuk navigasi. ModalControl hanya membuat dan menyajikan modal.

Saya tidak setuju bahwa CSS tidak jelas, ini adalah CSS ionik standar yang diterapkan ke halaman ketika didorong secara normal, saya setuju bahwa itu bisa berhenti bekerja atau menyebabkan masalah jika ada perubahan besar pada ionik (seperti dengan V4 datang ) itulah sebabnya ini harus diperbaiki sebagai bug yang memengaruhi platform iOS untuk Ionic sehingga orang tidak PERLU menerapkan perbaikan apa pun.

Masalah ini tidak ada di Android, yang berfungsi sempurna tanpa perubahan apa pun. Jadi ini tampaknya merupakan bug khusus platform dengan kelas CSS yang menerapkan ionik.

Saya akui saya belum mengujinya pada perangkat layar yang lebih besar dan mungkin ada hal lain yang diperlukan di sana, saya akan melihatnya.

Saya dapat melihat bahwa ada solusi yang telah hilang dari dokumen dan sekarang hanya ada sebagai komentar di header file sumber. Jika solusi ini dapat dipulihkan ke dokumen pengontrol nav resmi, ke bagian tentang menavigasi dari Modal, maka setidaknya ada solusi yang didokumentasikan dan dokumentasinya mudah diakses oleh orang yang membaca Dokumen Ionic.

Kami jelas tidak akan menyetujui pendekatan mana yang benar atau salah, jadi kesampingkan itu, selama ada cara yang direkomendasikan secara resmi untuk melakukan ini (apa pun itu) ditambahkan dengan benar ke dokumen maka itu cukup baik untuk saya.

Terima kasih untuk masalah ini! Masalah ini sedang dikunci untuk mencegah komentar yang tidak relevan dengan masalah asli. Jika ini masih menjadi masalah dengan versi terbaru Ionic, harap buat masalah baru dan pastikan template terisi penuh.