Question

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

一个用例是创建和编辑消息：我想在仪表板页面上显示“新消息”按钮，在消息列表页面上显示另一个“新消息”按钮，在第二个按钮上显示“编辑消息”消息视图页面。所有这些按钮都应该打开相同的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”类放入一个单独的文件中，并为其添加了一个导入，但是这个失败了。当我调用showModal（）时会抛出此异常：

ORIGINAL EXCEPTION：TypeError：componentType未定义

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

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

Answer 1

这适用于一个页面，但我想在其他页面中重用此模式页面。我试图将＆＃34; MessagesEditModal＆＃34;上课分开文件并为其添加了导入，但是失败了。

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

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

1 个答案: