Различия между ModalController и NavController


Мне нужно понять различия между ModalController и NavController в Ionic 2. Когда я должен выбрать NavController и когда выбрать ModalController?

2 2

2 ответа:

В ModalController doc:

Модальный использует NavController, чтобы представить себя в корневом nav стек. Он добавляется в стек аналогично тому, как NavController.толкать завод.

Таким образом, мы можем сказать, что в механизме они одинаковы. Давайте поговорим о UX.

Модальная область-это область содержимого, которая проходит над текущей страницей пользователя

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

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

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

import { ModalController } from 'ionic-angular';
import { Page1 } from './pages';

constructor(private modalCtrl: ModalController) {}

let modal = this.modalCtrl.create(Page1);
modal.present();
modal.onDidDismiss(() => {
  // Action done after dismissing the modal.
}); 

NavController используется для навигации (подумайте о вкладках или просто базовой навигации по страницам). Этот контроллер также содержит историю навигации.

import { NavController } from 'ionic-angular';
import { Page1 } from './pages';

constructor(private navCtrl: NavController) {

}

this.navCtrl.push(Page1);
Таким образом, существует два различных подхода к представлению нужной страницы. Для большего информация / опции / методы пожалуйста, подготовьте предоставленные ссылки, содержащие все доступные функции, доступные на компонентах Modal-и NavController.