Как работать с модальными диалогами в мобильном приложении NativeScript Angular 2

Сегодня мы поговорим о модальных окнах в NativeScript. Многие не любят их по причине непонимания механизма передачи данных между окнами, и совершенно напрасно, это очень просто!

Как обычно, начнём с создания нового приложения (перед этим убедитесь, что у вас установлен NativeScript и Android SDK или Xcode в MacOS):

tns create ModalProject --ng
cd ModalProject
tns platform add android
tns platform add ios
В конце у нас должно получиться такое приложение:

У нас будет кнопка, по нажатию на которую появится список действий. При выборе действия, экран возвращается на первую страницу.

Если у вас Mac или Linux, выполните команды:

touch app/app.modal.ts
touch app/app.modal.html
Если у вас Windows, то нужно вручную создать эти файлы.

Откройте файл app/app.modal.ts и вставьте в него следующий код:

import { Component } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/directives/dialogs";

@Component({
selector: "my-modal",
templateUrl: "app.modal.html",
})
export class ModalComponent {

public frameworks: Array;

public constructor(private params: ModalDialogParams) {
this.frameworks = [
"NativeScript",
"Xamarin",
"Onsen UI",
"Ionic Framework",
"React Native"
];
}

public close(res: string) {
this.params.closeCallback(res);
}

}
В классе ModalComponent есть публичный массив, который будет привязан к интерфейсу модального окна. При закрытии модального окна у нас есть возможность передать какие-то данные родительскому окну. Это делается с помощью метода closeCallback службы ModalDialogParams.

Перейдём к интерфейсу. Откройте файл app/app.modal.html и вставьте следующую разметку:






У нас есть список, каждый элемент которого загружается из массива frameworks. При нажатии на элемент, вызывается метод close с передачей методу выбранного элемента.

Для работы модального окна нужно его включить в блок @NgModule файла app/app.module.ts. Откроем его и вставим следующий код:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import { ModalDialogService } from "nativescript-angular/modal-dialog";

import { AppComponent } from "./app.component";
import { ModalComponent } from "./app.modal";

@NgModule({
declarations: [AppComponent, ModalComponent],
entryComponents: [ModalComponent],
bootstrap: [AppComponent],
imports: [
NativeScriptModule
],
providers: [ModalDialogService],
schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }
Здесь мы импортировали ModalDialogService и включили его в массивы declarations и entryComponents блока @NgModule.

Теперь мы можем вызывать модальное окно из приложения.

Откроем файл app/app.component.ts и включим следующий код:

import { Component, ViewContainerRef } from "@angular/core";
import { ModalDialogService } from "nativescript-angular/directives/dialogs";
import { ModalComponent } from "./app.modal";

@Component({
selector: "my-app",
templateUrl: "app.component.html",
})
export class AppComponent {

public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }

public showModal() {
let options = {
context: {},
fullscreen: true,
viewContainerRef: this.vcRef
};
this.modal.showModal(ModalComponent, options).then(res => {
console.log(res);
});
}

}
Здесь в методе constructor класса AppComponent у нас находятся методы для работы с модальными окнами. И для открытия модального окна нужно будет вызвать метод showModal.
А при закрытии модального окна, переданные из него данные будут выведены в консоль.

Снова откроем файл app/app.component.html и добавим:





Мы добавили навигационную панель и кнопку по центру окна. При нажатии на кнопку будет вызван метод showModal.

Видео-версия этой статьи (на английском):

Автор: Nic Raboy, «Using Modal Dialogs In A NativeScript Angular Mobile Application»