Ionic-framework: Нет заполнения для строки состояния (на iOS) при нажатии на навигацию внутри модального окна

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

Всем здравствуйте! Спасибо за использование Ionic !. Я рад сообщить, что больше не могу воспроизвести эту проблему с RC0. Спасибо!

Эта ошибка все еще существует. Эта проблема может быть воспроизведена только на реальном устройстве / эмуляторе. Он не будет отображаться в браузерах настольных компьютеров, если вы не передадите {statusbarPadding: true} в переменную конфигурации IonicModule.forRoot(MyApp, config) . Я создал быстрое репо, чтобы продемонстрировать эту проблему с RC0 https://github.com/msalcala11/modal-padding-bug.

Здесь та же проблема.

Могу также подтвердить эту проблему

да, эта проблема все еще существует. пожалуйста, откройте

Мы должны лучше документировать модальные окна, у нас есть люди, которые работают над этим прямо сейчас.
@comfortme @royipressburger @CyrisXD @ msalcala11 @zmbc Вам нужно создать новую ion-nav, чтобы иметь навигацию внутри модального окна, точно так же, как вы это делаете для навигации в вашем приложении.

@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 в модальном окне, он переходит на страницу, все хорошо переходит и работает именно так, как я хочу. ЗА ИСКЛЮЧЕНИЕМ того, что заполнение строки состояния не применяется, когда я перехожу на страницу из модального окна.

Я действительно не понимаю, как приведенный выше фрагмент кода вообще помогает мне в этом? Кажется, это должно быть очень просто, поскольку функционально все работает И в одной из более ранних бета-версий дополнение строки состояния также было правильно применено, но это было снова нарушено в более позднем выпуске.

Обратите внимание, что у Android нет проблем с тем же кодом, навигация с другой страницы или из модального окна все отформатирована правильно и работает нормально, я ожидаю, что ios будет таким же.

Все еще существует. Какие-нибудь простые хаки, чтобы предотвратить это?

Примените следующий CSS к ion-navbar и ion-title, чтобы исправить это. Я использую ngIf *, чтобы применить его только в том случае, если platform.is (iOS) as android не нужен. Это просто отменяется css по умолчанию при открытии с другой страницы в iOS, поэтому здесь тоже нет проблем.

Также обратите внимание, что любое предупреждение / таблица действий / всплывающее окно, открывающееся с недавно нажатой страницы, будет открываться позади страницы. Вам нужно будет взломать значение z-index, чтобы эти компоненты были выше модального z-индекса, чтобы они всегда были наверху. Учитывая, что эти вещи всегда должны быть наверху, это не проблема.

<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 Team сама занялась этим, нам бы не пришлось пережить эту боль.

Для всех, кто сталкивается с этим с помощью всплывающего окна, это та же проблема.

Что касается решения: не стоит использовать подход CSS-fix, потому что вы просто маскируете то, что вы делаете не так, как задумано (даже если это немного странный дизайн, черт возьми).

Другое решение, отличное от того, на которое указывает один корпоративный сотрудник, - это работа с событиями. Я так и сделал, и это очень просто и чисто. Просто запустите событие на своей модальной или всплывающей странице и слушайте его на своей "исходной" странице. Больше о событиях можно найти здесь: https://ionicframework.com/docs/api/util/Events/

@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 Не могли бы вы повторно открыть этот выпуск? Открыть модальное окно на странице, открытой с помощью navController.push (), вызывает ту же ситуацию, что и на картинке в первом сообщении.

Да, пожалуйста, откройте заново

@vosecek Проблема существует, но вы можете использовать исправление css, которое я опубликовал выше. Работает с 3.3.

Привет, ребята, ознакомьтесь с API-интерфейсом NavController , в частности с разделом, озаглавленным « Навигация из компонента наложения» (вставлен ниже)

Обратите внимание на использование 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 это работает, но не тогда, когда вам все еще нужно, чтобы всплывающее окно было активным, когда вы возвращаетесь со страницы. Я не думаю, что возможно перейти от всплывающего окна и вернуться к нему, как к обычной странице с текущим дизайном, всплывающее окно расположено на более высоком уровне, чем все обычные страницы, поэтому необходимо закрыть. Если только они не изменят поведение popover полностью.

Поскольку эта ошибка не была исправлена, я добавил этот код 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 .

На странице содержимого, которую вы представляете как модальное окно, просто включите другой класс страницы-оболочки с таким элементом навигации:

@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 но я предполагаю, что он будет работать и на последней версии.

Но дело в том, что функционально он работает совершенно нормально, как есть, и нет необходимости во всем этом дополнительном коде, только одно исправление CSS только для iOS, и это даже не проблема.

@ ghenry22 Это не совсем верно для больших экранов, например iPad, где перемещаемая страница является полноэкранной, хотя модальное окно мало.

Я желаю nav.push внутри модального окна Just Worked. Но я бы предпочел сделать это более сложным способом, чем полагаться на более хакерские исправления CSS.

@ ghenry22 @zmbc Навигационное представление подразумевает отдельный стек навигации, который вы создаете при открытии модального окна. Это способ".

Когда вы вызываете navCtrl.pop, это может создать непреднамеренные проблемы с корневой навигацией, поскольку Ionic не понимает, когда вы находитесь в модальном режиме, а когда нет.

У меня тоже нет проблем с загружаемыми страницами на iOS? Я имею в виду, что я снова протестирую это сейчас, когда вы упомянули об этом, чтобы убедиться, но они остаются в рамках модального окна для меня.

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

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

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

Если вы хотите, чтобы загруженная страница внутри модального окна открывалась в полноэкранном режиме на ipad, я думаю, вам понадобится функция, которая закрывает модальное окно, а затем подталкивает страницу, что наверняка может стать немного беспорядочным.

@wbhob это может быть желаемый результат, но все, что вам нужно сделать, это посмотреть на этот билет, а также на ионные форумы и переполнение стека, чтобы увидеть один и тот же вопрос, который задают снова и снова.

Таким образом, очевидно, что это проблема людей с чистой точки зрения юзабилити. Было бы здорово, если бы ionic мог реализовать что-то под капотом, чтобы оно «просто работало», тогда все комментарии и запросы по этой закрытой проблеме прекратились бы :)

Сделал пиар к документации @ ghenry22

Мой пр был объединен! Проверьте модальные документы

@ jgw96 Я надеюсь, что это будет решено с помощью Ionic4. Он был выдающимся со времен ionic2 RC0 без каких-либо действий, что немного шокирует, учитывая, что это простое исправление CSS, а затем использование навигации работает должным образом, независимо от того, находитесь ли вы на модальной или обычной странице. Как это должно.

Работает как положено, не проблема. Подробности о том, как это сделать, можно найти в документации Ionic (я написал эту часть документации).

@wbhob, за исключением того, что он работает не так, как ожидалось. Как показывают многочисленные темы на форуме. Проблемы здесь и при переполнении стека.

Навигация работает точно так же, как и следовало ожидать, за исключением того, что нажатая страница теряет свой статус при заполнении. Это простое исправление css, не требующее ничего более сложного.

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

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

Правильный способ сделать это - создать автономный экземпляр навигации внутри модального окна. Ваше намерение состоит в том, чтобы перейти к дополнительным страницам, но когда вы вызываете navCtrl.push, как и следовало ожидать, он запускает его против корневого стека навигации, поскольку он не знает ничего лучшего. Если вы сделаете это правильно и сделаете стек навигации эксклюзивным для модального окна, он будет работать правильно.

Да, это способ сделать это для конкретного сценария. Предполагая, что в вашем случае использования вы хотите отклонить открытый оверлей (модальный / всплывающий и т. Д.), А ЗАТЕМ открыть страницу. В этом сценарии да, то, что вы сказали, и то, что показано в документации компонентов Ionic для контроллера навигации, работает нормально.

Я не хочу отклонять открытое модальное окно, я хочу иметь возможность переходить на страницу, на которой будет отображаться некоторая дополнительная информация, и когда это будет сделано, нажмите НАЗАД, чтобы вернуться в модальное окно, из которого была открыта страница. Этот сценарий не рассматривается в документации, на которую вы ссылаетесь.

Для второго сценария все работает отлично с точки зрения функциональности. На 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, кажется, что обновления, добавленные @wbhob , не отражаются на страницах документации ионных компонентов. Я попробую решение из старых коммитов, но если оно работает так, как вы говорите, было бы неплохо включить эту информацию в документы или примеры API компонента навигационного контроллера, чтобы ее можно было легко найти.

Тем не менее, если применяются правильные классы CSS (как на Android), тогда нет необходимости в какой-либо работе или дополнительном коде от пользователя, безусловно, это будет желательным результатом?

@ ghenry22 Я больше не уверен, где находится документация в проекте, но я думаю, вы правы, что изменений @wbhob больше нет (хотя они будут в ModalController , а не в NavController ).

Как я уже объяснял ранее , неверно, что исправление CSS так же хорошо, как и рекомендуемое решение. Это эквивалентно только на маленьких экранах, где модальные окна являются полноэкранными, и кто знает, будет ли это работать в следующей версии Ionic? Рекомендуемое решение создает настоящий стек навигации, который вам нужен в данной ситуации, работает на экранах всех размеров и использует документированный общедоступный API. Кроме того, нет большой разницы в сложности кода: я бы предпочел иметь еще несколько строк шаблона, чем какой-нибудь непонятный SCSS, который я не смогу понять в будущем.

Я рекомендую вам использовать этот подход, чтобы делать именно то, что вы хотите: переместить страницу в модальное окно и иметь возможность вернуться в модальное окно. Если вы не хотите этого делать, решать вам. Но с Ionic это явно не проблема.

@zmbc документация будет на navController, поскольку это то, что используется для навигации. ModalControl просто создает и представляет модальное окно.

Я не согласен с тем, что CSS неясен, это стандартный ионный CSS, который применяется к странице при обычном нажатии, я согласен, что он может перестать работать или вызвать проблемы, если произойдет серьезное изменение в ионном (например, с выходом V4 ), поэтому это должно быть исправлено как ошибка, влияющая на платформу iOS для Ionic, поэтому людям НЕ НУЖНО применять какое-либо исправление.

Этой проблемы нет на Android, который отлично работает без каких-либо изменений. Так что это действительно специфическая ошибка платформы с применением классов CSS ionic.

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

Я вижу, что есть решение, которое было потеряно из документации и теперь существует только как комментарий в заголовке исходного файла. Если это решение можно восстановить в официальных документах по навигационному контроллеру, в разделе о навигации из модального окна, то, по крайней мере, есть решение, которое задокументировано, и документация легко доступна для людей, читающих Ionic Docs.

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

Спасибо за вопрос! Эта проблема заблокирована, чтобы предотвратить комментарии, не относящиеся к исходной проблеме. Если это все еще проблема с последней версией Ionic, создайте новую проблему и убедитесь, что шаблон полностью заполнен.