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

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

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

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

tns create ModalProject --ng
cd ModalProject
tns platform add android
tns platform add ios

В конце у нас должно получиться такое приложение:

Разработка: Как работать с модальными диалогами в мобильном приложении NativeScript Angular 2
У нас будет кнопка, по нажатию на которую появится список действий. При выборе действия, экран возвращается на первую страницу.

Если у вас 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<string>;
 
    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 и вставьте следующую разметку:

<GridLayout backgroundColor="white">
    <ListView [items]="frameworks" class="list-group">
        <Template let-framework="item">
            <StackLayout class="list-group-item" (tap)="close(framework)">
                <Label text="{{ framework }}" class="label"></Label>
            </StackLayout>
        </Template>
    </ListView>
</GridLayout>

У нас есть список, каждый элемент которого загружается из массива 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 и добавим:

<ActionBar title="{N} Modal Example"></ActionBar>
<StackLayout horizontalAlignment="center" verticalAlignment="center">
    <Button text="Show Modal" (tap)="showModal()" class="btn btn-primary"></Button>
</StackLayout>

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

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

Автор: Nic Raboy, «Using Modal Dialogs In A NativeScript Angular Mobile Application»
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.