이온 2 모달을 어떻게 분리 된 파일에 넣을 수 있습니까?

Question

나는 이오닉 2를 사용하고 있고 다른 페이지에 모달을 사용하고 싶다.

하나의 사용 사례는 메시지 작성 및 편집입니다. 대시 보드 페이지에 "새 메시지"버튼을 표시하고 메시지 목록 페이지에 또 다른 "새 메시지"버튼을, 세 번째 버튼에 "메시지 편집"버튼을 표시하려고합니다. 메시지보기 페이지 모든 단추는 동일한 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 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(); 
    } 

}