如何将 Ionic 2 Modal 放在单独的文件中？

Question

我正在使用 Ionic 2 并想为不同的页面使用模态框。

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

我当前的代码如下所示：

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" class 放入单独的文件中并为其添加导入，但这失败了。当我调用 showModal() 时会抛出此异常：

ORIGINAL EXCEPTION: TypeError: componentType is undefined

如何使用来自不同页面的模式？

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

Answer 1

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 class 定义中添加了 export 关键字？

@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 放在单独的文件中？

How can I put an Ionic 2 Modal in a separate file?

typescript

ionic-framework

ionic2

angular