Ionic에서 알림 사용

지금까지 Modals in Ionic , Toast messages for Ionic 을 보았으므로 오늘은 경고 메시지를 살펴보겠습니다.

경고는 얼굴 토스트 메시지에 조금 더 많은 것을 담을 수 있는 좋은 방법입니다.
해제하려면 사용자 작업이 필요하며 데이터를 요청하라는 메시지를 표시할 수도 있습니다!

Ionic의 일반적인 알림은 다음과 같습니다.

Ionic에서 알림 추가

기본값ionic starter app을 다시 사용하여 시작하겠습니다.
먼저 tab1.page.html에 버튼을 추가하는 것으로 시작하겠습니다.

<div class="ion-padding">
  <ion-button expand="block" (click)="showAlert()">Show alert</ion-button>
  <ion-button expand="block" (click)="showPrompt()">Show prompt</ion-button>
</div>

그러면 두 개의 버튼이 생성됩니다. 둘 다 고유한 작업이 있으며 별도로 만들 것입니다.

먼저 alertController를 tab1.page.ts 파일에 로드해야 합니다.

import { AlertController } from "@ionic/angular";

export class Tab1Page {
  constructor(public alertController: AlertController) {}
}

기본showAlert 기능을 추가하여 시작하겠습니다. 이것은 하나의 버튼으로 경고를 표시합니다.

async showAlert() {
    const alert = await this.alertController.create({
      header: "Alert",
      subHeader: "Subtitle",
      message: "This is an alert message.",
      buttons: ["OK"],
    });

    await alert.present();
}

결과는 다음과 같습니다.



보시다시피 사용자는 계속하려면 버튼을 클릭해야 합니다. 이것은 사용자가 어떤 일이 발생했음을 인지하기를 원하는 경우에 완벽합니다.

Ionic 알림에서 버튼 클릭 캡처

대부분의 경우 여러 버튼을 렌더링하고 클릭한 버튼을 캡처해야 할 수 있습니다. 수락/거부 옵션을 상상하고 어떻게 캡처할 수 있습니까?

async showOptions() {
    const alert = await this.alertController.create({
      header: "Alert",
      message: "Choose an option below",
      buttons: [
        {
          text: "Decline",
          role: "cancel",
          handler: () => {
            console.log("Declined the offer");
          },
        },
        {
          text: "Accept",
          handler: () => {
            console.log("Accepted the offer");
          },
        },
      ],
    });

    await alert.present();
}

이 기능도 경고를 표시하지만 이 경우 두 개의 버튼이 있습니다.
보시다시피 role: cancel를 하나에 추가했습니다. 누군가가 배경을 클릭하여 알림을 닫을 때 호출되는 콜백입니다.
이 코드를 실행하면 콘솔에서 어떤 버튼이 클릭되었는지 확인할 수 있습니다.

Ionic 알림에 입력 옵션 추가

알림을 사용할 수 있는 또 다른 용도는 사용자에게 프롬프트를 표시하는 것입니다. 경고 내에서 특정 이름을 캡처하려고 한다고 가정해 보겠습니다.

async showPrompt() {
    const alert = await this.alertController.create({
      header: "Prompt!",
      inputs: [
        {
          name: "name",
          type: "text",
          placeholder: "Your name",
        },
      ],
      buttons: [
        {
          text: "Cancel",
          role: "cancel",
          handler: () => {
            console.log("Confirm Cancel");
          },
        },
        {
          text: "Ok",
          handler: (data) => {
            console.log(`The name is ${data.name}`);
          },
        },
      ],
    });

    await alert.present();
}

이렇게 하면 입력 필드가 있는 경고 메시지가 표시됩니다.
필드를 채우고 확인 버튼을 클릭하면 콘솔에 로그인된 이름이 표시됩니다.
취소 버튼을 클릭하면 이름을 읽지 않습니다.



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

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

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