Ionic 2 Modalを別ファイルにするにはどうしたらいいですか？

Question

私はイオン2を使用しており、異なるページにモーダルを使用したいと考えています。

メッセージの作成と編集には、ダッシュボードページに「新しいメッセージ」ボタン、メッセージリストページに別の「新しいメッセージ」ボタン、3番目のボタン「編集メッセージ」が表示されます。メッセージ表示ページ。それらのボタンはすべて同じ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(); 
    } 

} 

これは、1ページのために正常に動作しますが、私は他のページでこのモーダルを再利用したいです。私は "MessagesEditModal"クラスを別のファイルに入れようとしましたが、インポートを追加しましたが、これは失敗します。 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クラス定義で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(); 
    } 

}