데이터 전달 및 수신 이온 모달

어제 우리는 modal in Ionic을 만들었습니다. 모달은 정말 멋지지만 일반적으로 모달에서 데이터를 전달하거나 받기를 원합니다.

그것이 오늘 우리가 만들 것입니다. 데이터를 전달하고 수정하고 반환하는 모달입니다.

오늘의 최종 결과는 다음과 같습니다.

Ionic 모달에 데이터 전달

먼저 모달에 데이터를 전달하여 시작하겠습니다. 이는 modalController 생성 함수에서 componentProps를 호출하는 것만큼 간단합니다.

number: number = 3;

const modal = await this.modalController.create({
  component: DetailPage,
  componentProps: {
    number: this.number
  }
});

그런 다음 DetailPage에서 이러한 값을 구성 요소 내부에 정의하여 검색할 수 있습니다!

export class DetailPage implements OnInit {
  number: number;

  ngOnInit() {
    console.log(this.number);
  }
}

모달 구성 요소에 데이터를 전달하는 것이 얼마나 쉬운지입니다.

이온 모달 해제 수신 데이터

물론 우리는 이 데이터를 메인 구성 요소( tab1.page.ts )에서 다시 수신할 수 있기를 원합니다.

데이터를 다시 전달하기 전에 숫자를 수정할 수 있는 함수를 추가해 보겠습니다.
detail.page.html에 다음 마크업을 추가합니다.

<ion-item>
  <ion-icon name="remove-circle" (click)="sub()" item-right></ion-icon>
  <ion-input
    type="number"
    min="1"
    class="ion-text-center"
    [value]="number"
    [(ngModel)]="number"
  ></ion-input>
  <ion-icon name="add-circle" (click)="plus()" item-right></ion-icon>
</ion-item>

이제 plus 파일에 sub 및 detail.page.ts 함수를 추가해 보겠습니다.

plus() {
    this.number++;
}

sub() {
    this.number--;
}

이렇게 하면 번호가 수정되지만 여전히 초기tab1.page로 다시 전달해야 합니다. 이를 위해 dismiss 함수를 수정해야 합니다.

dismiss() {
    this.modalController.dismiss({
      number: this.number,
    });
}

이렇게 하면 숫자가 변수로 전송됩니다number.
tab1.page.ts에서 이를 수신할 수 있지만 onDidDismiss 함수에 presentModal 콜백을 추가합니다.

modal.onDidDismiss().then(data => {
  this.number = data.data.number;
});

그러면 데이터가 수신되고 번호가 업데이트됩니다.
그런 다음 다음에 모달을 열면 새 숫자가 반영됩니다.

그리고 Ionic Modals에서 데이터를 전달하고 수신합니다.

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

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

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