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

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

  • Поместите страницу в стек, в этом случае она становится сверху, потому что нажатие на стек означает размещение элемента наверху.
  • Всплывайте страницы до тех пор, пока ваша целевая страница не окажется наверху, но это означает, что ваша страница должна уже существовать в стеке навигации, что означает только то, что вы перешли к ней раньше. Вот как Ionic 2 реализует кнопку «Назад» (открывая текущая страница из стека навигации).

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

  • Когда вы переходите на страницу, вы помещаете страницу на вершину стека.
  • Когда вы переходите со страницы, вы извлекаете страницу из верхней части стека.

Вы можете узнать больше о структуре данных стека по этой ссылке на Википедию.

Начало работы с навигацией Ionic 2

Теперь, когда мы поняли теорию, лежащую в основе навигационной системы Ionic 2. Давайте посмотрим, как ее реализовать, не волнуйтесь, вам не нужно реализовывать стек самостоятельно, Ionic 2 уже сделал это за вас. Вы можете легко выполнить навигация с помощью компонента NavController наряду со многими другими компонентами.

Если вы уже сгенерировали проект Ionic 2 с некоторыми страницами, вы, вероятно, видели, как NavController внедряется в каждый конструктор страниц, поэтому вам не нужно делать ничего, кроме навигации, но как?

Компонент NavController предоставляет множество методов, поэтому вы можете легко управлять стеком навигации, но NavController — не единственный доступный компонент для навигации, есть и другие компоненты:

  • NavParams
  • NavPop
  • NavPush
  • навигация
  • NavBar

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

Мы начнем с создания нового проекта Ionic 2 (на основе пустого шаблона), так что продолжайте и выполните следующие команды в вашем терминале или командной строке.

ionic start ionic-2-navigation blank --v2

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

cd ionic-2-navigation ionic g page about ionic g page contact

Вам нужно добавить эти две страницы в ваш app.module.ts. Для этого просто откройте файл src/app/app.module.ts и добавьте две страницы в массивы объявлений и entryComponents после их импорта.

import { NgModule, ErrorHandler } from [email protected]/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; @NgModule({ declarations: [ MyApp, HomePage, AboutPage, ContactPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, AboutPage, ContactPage ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

Как использовать NavController?

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

Откройте app/src/pages/home/home.ts и выполните следующие действия:

  • Импорт двух компонентов страницы
  • Добавьте два метода: gotoAbout() и gotoContact().

Импорт двух компонентов страницы

import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact';

Добавление методов для навигации

@Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { } public gotoAbout(){ this.navCtrl.push(AboutPage); } public gotoContact(){ this.navCtrl.push(ContactPage); } }

Как видите, мы переходим на другую страницу, используя метод push() NavController, который внедряется через конструктор страницы и становится доступным из объекта this.navCtrl. NavController уже импортирован для нас и введен генератором страниц Ionic CLI, но если вы создаете страницу вручную, вам нужно импортировать службу NavController из «ionic-angular» и внедрить ее через конструктор компонентов, чтобы иметь возможность ее использовать.

Чтобы перейти на другую страницу, сначала мы импортируем, а затем используем метод push NavController, который принимает целевую страницу/компонент в качестве параметра.

Далее нам нужно привязать два метода к двум кнопкам в компонентном представлении (home.html). Откройте src/pages/home/home.html и добавьте две кнопки.

<button ion-button (click)="gotoAbout();">Go to about</button> <button ion-button (click)="gotoContact()">Go to contact</button>

Давайте добавим кнопку «Назад» на наши страницы «О нас» и «Контакты».

Откройте src/pages/about/about.ts и добавьте метод goBack():

goBack(){ this.navCtrl.pop(); }

Затем привяжите его к кнопке в соответствующем виде компонента.

<button ion-button (click)="goBack()">Go back</button>

Сделайте то же самое для страницы контактов.

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

Следующим сервисом, который мы увидим, является NavParams, который позволяет нам передавать параметры между страницами при навигации.

Использование NavParams

Во многих ситуациях нам нужно передавать параметры с одной страницы на другую, например, со страницы списка на страницу сведений. Ionic 2 сделал это так же просто, как навигация с помощью NavController.

Вы можете передавать параметры с помощью метода push() NavController в качестве второго параметра метода, но для их получения вам необходимо использовать службу NavParams, поэтому давайте посмотрим, как это сделать, на примере.

Снова откройте src/pages/home/home.ts и добавьте метод изменения gotoAbout() следующим образом:

gotoAbout(){ this.navCtrl.push(this.aboutPage, {param1: «привет», param2: «мир»}); }

Вы передаете параметры как объект JavaScript второму параметру метода push(). Вы можете назвать параметр как хотите, но, конечно, это должно быть действительное ключевое слово TypeScript.

Теперь нам нужно получить эти параметры на нашей странице about, начните с открытия src/pages/about/about.ts, затем следуйте инструкциям

  • Импорт NavParams из ionic-angular
  • Внедрить сервис через конструктор компонентов
  • Используйте метод get или атрибут данных экземпляра NavParams для получения значений.

Импорт NavParams:

import { NavParams } from 'ionic-angular';

Внедрение сервиса и получение параметров

@Component({ selector: 'page-about', templateUrl: 'about.html' }) export class AboutPage { private param1 : string ; private param2 : string ; private allParams ; constructor(public navCtrl: NavController, public navParams: NavParams) { this.param1 = this.navParams.get("param1"); this.param2 = this.navParams.get("param2"); this.allParams = this.navParams.data ; } ionViewDidLoad() { console.log('ionViewDidLoad AboutPage'); } goBack(){ this.navCtrl.pop(); } }

Вы можете найти больше информации о сервисе NavParams в его официальной документации.

Как использовать NavPush и NavPop?

Ionic 2 предоставляет два других сервиса, которые позволяют выполнять навигацию, но на этот раз декларативно, т.е. внутри представлений компонентов страницы.

NavPush эквивалентен методу push() в NavController.
NavPop эквивалентен методу pop() в NavController.

Давайте теперь рассмотрим пример, чтобы понять, как их использовать. Откройте /src/pages/home/home.ts и /src/pages/home/home.html.

  • Добавьте две переменные экземпляра в класс HomePage, aboutPage и contactPage, чтобы хранить экземпляры AboutPage и ContactPage.
  • Добавьте кнопки с атрибутами navPush и navPop в home.html.

Добавление переменных экземпляра

export class HomePage { public aboutPage = AboutPage; public contactPage = ContactPage; public myParams = { param1 : "Hello", param2 : "World" };

Добавление кнопок

<button ion-button [navPush]="aboutPage">Go to about </button> <button ion-button [navPush]="contactPage">Go to contact</button>

Что делать, если вы хотите передать параметры?

Это также легко, если вы просто используете свойство navParams:

<button ion-button [navPush]="aboutPage" [navParams]="params">Go to about </button>

Но не забудьте добавить переменную-член (myParams), которая содержит все параметры, которые вы хотите передать, в HomeClass.

Для использования navPop вы просто добавляете его к кнопке без какого-либо значения.

<button ion-button navPop>Go back</button>

и это все, у вас есть быстрый способ добавить кнопку «Назад» на свою страницу без большого количества кода.

Так что/когда использовать NavController или NavPush/NavPop?
Оба сервиса можно использовать для добавления навигации, так что это зависит от ваших предпочтений и потребностей, но если вам нужен быстрый декларативный способ добавить навигацию, используйте NavPush и NavPop. В противном случае, если вы хотите больше контроля и возможности добавлять действия до или после навигации, используйте NavController.

Как использовать компонент Nav?

Nav — это еще один декларативный эквивалент NavController, который позволяет вам устанавливать корневую страницу из представлений HTML.

В вашем сгенерированном проекте на основе пустого шаблона HomePage уже установлена ​​в качестве корневой страницы.

Если вы откроете src/app/app.html, представление, связанное с корневым компонентом приложения, вы найдете

<ion-nav [root]="rootPage"></ion-nav>

В src/app/app.component.ts для rootPage установлено значение HomePage.

@Component({ templateUrl: 'app.html' }) export class MyApp { rootPage = HomePage;

Вы также можете установить корневую страницу, используя метод setRoot() NavController.

this.navCtrl.setRoot(HomePage);

Навбар

Панель навигации — это навигационная панель инструментов, которую вы найдете поверх страниц вашего приложения с помощью кнопки «Назад». Панель навигации может содержать заголовок, кнопки, сегмент и панель поиска.

В нашем пустом демо уже есть панель навигации в home.html.

<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header>

Итак, давайте добавим несколько кнопок на нашу панель навигации.

<ion-header> <ion-navbar> <ion-title> Ionic 2 navigation demo </ion-title> </ion-navbar> <ion-buttons end> <button ion-button icon-only (click)="openModal()"> <ion-icon name="options"></ion-icon> </button> </ion-buttons> </ion-header>

Вывод

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

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

Поделиться в Twitter Поделиться в Facebook Поделиться в Google+

Первоначально опубликовано на www.techiediaries.com.