Ionic 앱에 모달 추가

모달은 앱에서 큰 역할을 합니다. 작은 세부 거래를 위해 거의 모든 곳에서 볼 수 있습니다.

이 기사에서는 Ionic 앱에 고유한 모달을 추가하는 방법을 보여줍니다.

결과는 다음과 같습니다.

This tutorial will pick up from our starting Ionic app, which you can download from GitHub.

Ionic 앱의 모달

첫 번째 탭 페이지에 모달을 추가할 것입니다.tab1.page.ts 파일을 엽니다.

잠시 후 HTML을 통해 호출할 수 있는 함수를 생성하여 시작합니다.
이 함수는 async 함수가 되며 modalController를 호출하여 특정 모달을 생성합니다.

async presentModal() {
    const modal = await this.modalController.create({
      component: DetailPage
    });

    return await modal.present();
}

생성자에 modalController를 등록해야 합니다.

constructor(public modalController: ModalController) {}

그리고 우리가 DetailPage라는 구성 요소를 사용하는 것을 발견했을 수도 있으므로 계속해서 해당 구성 요소를 생성해 보겠습니다.

ng g page Detail

그러면 DetailPage가 생성됩니다. (tab1.page.ts에서 세부정보 페이지를 가져와야 합니다.)

모달 호출

presentModal 파일에서 tab1.page.html 함수를 호출하여 모달을 프롬프트할 수 있습니다.

<ion-button (click)="presentModal()" expand="block">Show Modal</ion-button>

이렇게 하면 클릭 시 세부 정보 모달이 열리는 버튼이 생성됩니다.

그러나 이런 일이 발생하면 지금 모달을 닫을 방법이 없음을 발견했을 수 있습니다.

다행스럽게도 modalController 파일에 주입하여 전역detail.page.ts을 활용할 수 있습니다.

constructor(public modalController: ModalController) {}

그런 다음 모달의 해제를 처리하는 해제 함수를 만들 수 있습니다.

dismiss() {
    this.modalController.dismiss();
}

세부 정보 페이지에 모달을 닫는 뒤로 버튼이 있는 것은 매우 일반적이므로 detail.page.html 에 해당 버튼 중 하나를 추가해 보겠습니다.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button color="white" (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Detail</ion-title>
  </ion-toolbar>
</ion-header>

모달을 닫는 버튼을 페이지에 추가할 수도 있습니다.

<ion-content fullscreen class="ion-padding">
  <ion-button (click)="dismiss()" expand="block">Dismiss Modal</ion-button>
</ion-content>

이 버튼은 동일하게 작동하며 모달을 닫습니다.

이제 Ionic의 모달은 매우 쉽고 유용합니다.
데이터를 전달하고 반환할 수도 있으며 이에 대해서는 다른 항목에서 설명합니다.

오늘의 코드는 GitHub 에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나