如何将Ionic 2 Modal放在单独的文件中？ [英] How can I put an Ionic 2 Modal in a separate file?

问题描述

我正在使用Ionic 2并希望将Modal用于不同的页面。

I'm using Ionic 2 and want to use a Modal for different pages.

一个用例是创建和编辑消息：我想显示一个仪表板页面上的新消息按钮，消息列表页面上的另一个新消息按钮和消息视图页面上的第三个按钮编辑消息。所有这些按钮都应该打开相同的MessagesEditModal。

One use case is the creation and editing of messages: I want to display a "new message" button on the dashboard page, another "new message" button on the messages list page and a third button "edit message" on the message view page. All of those buttons should open the same MessagesEditModal.

我当前的代码如下所示：

My current code looks like that:

import { Component } from '@angular/core';
import { Modal, NavController, ViewController } from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/messages/messages-list-page.html'
})
export class MessagesListPage {

    static get parameters() {
        return [[NavController]];
    }

    constructor(navController, sessionsService) {
        this.navController = navController;
    }

    showModal() {
        let modal = Modal.create(MessagesEditModal, { some: "data" });
        this.navController.present(modal);
    }

}

@Component({
    templateUrl: 'build/pages/messages/messages-edit-modal.html'
})
class MessagesEditModal {

    static get parameters() {
        return [ViewController];
    }

    constructor(viewCtrl) {
        this.viewCtrl = viewCtrl;
    }

    close() {
        this.viewCtrl.dismiss();
    }

}

这适用于一页，但我想在其他页面中重用这个模态。我试图将MessagesEditModal类放入一个单独的文件中，并为其添加了一个导入，但是这个失败了。当我调用showModal（）时会抛出此异常：

This works fine for one page, but I want to reuse this modal in other pages. I've tried to put the "MessagesEditModal" class into a separate file and added an import for it, but this fails. When I call showModal() this exception gets thrown:

ORIGINAL EXCEPTION：TypeError：componentType未定义

ORIGINAL EXCEPTION: TypeError: componentType is undefined

如何使用不同页面的模态？

How can I use a Modal from different pages?

我不想在这里使用页面，因为内容确实应该显示并且表现得像一个模态行为（平板电脑上的动画和非全屏）。

I don't want to use a page here because the content really should be displayed and behave like a modal behaves (animation and non-fullscreen on tablets).

推荐答案

这适用于一个页面，但我想在其他
页面中重用此模态。我试图将MessagesEditModal类放入一个单独的
文件中，并为其添加了一个导入，但是失败了。

This works fine for one page, but I want to reuse this modal in other pages. I've tried to put the "MessagesEditModal" class into a separate file and added an import for it, but this fails.

当你这样做时，你是否还在 MessagesEditModal 类定义中添加了 export 关键字？

When you did that, did you also add the export keyword in the MessagesEditModal class definition?

@Component({
    templateUrl: 'build/pages/messages/messages-edit-modal.html'
})
export class MessagesEditModal {

    static get parameters() {
        return [ViewController];
    }

    constructor(viewCtrl) {
        this.viewCtrl = viewCtrl;
    }

    close() {
        this.viewCtrl.dismiss();
    }

}

这篇关于如何将Ionic 2 Modal放在单独的文件中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！