[IONIC] Modal Controller - 파라미터 전달

ionic 차례

ionic-tutorial 프로젝트에서 계속합니다.

order 페이지에서 QRScanner를 띄우기 위해 먼저 modal 창을 띄우겠습니다.

order 페이지에서 qr-scan 모달을 띄우면서 parameter을 상호 전달합니다.

$ ionic g page qr-scan

src/app/account/order.module.ts

...
import { QrScanPage } from '../../qr-scan/qr-scan.page';

@NgModule({
  imports: [
    ....
  ],
  declarations: [OrderPage, QrScanPage],
  entryComponents: [QrScanPage]
})
....

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { OrderPageRoutingModule } from './order-routing.module';

import { OrderPage } from './order.page';
import { ComponentModule } from '../../components.module'
import { QrScanPage } from '../../qr-scan/qr-scan.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    OrderPageRoutingModule,
    ComponentModule
  ],
  declarations: [OrderPage, QrScanPage],
  entryComponents: [QrScanPage]
})
export class OrderPageModule {}

src/app/account/order.page.html

<app-header></app-header>

<ion-content>
    <button (click)="opeQRScan()">Scan</button>
    <p *ngIf="dataReturned">{{ dataReturned.paramFromModal }}</p>
</ion-content>

src/app/account/order.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { QrScanPage } from '../../qr-scan/qr-scan.page';

@Component({
  selector: 'app-order',
  templateUrl: './order.page.html',
  styleUrls: ['./order.page.scss'],
})
export class OrderPage {

  dataReturned

  constructor(
    public modalController: ModalController
  ) { }

  async opeQRScan() {
    const modal = await this.modalController.create({ 
      component: QrScanPage, 
      componentProps: { 
        param1: 'hello world' 
      },
      animated: true, 
    });
    modal.onDidDismiss().then((dataReturned) => {
      console.log(dataReturned)
      if (dataReturned !== null) {
        this.dataReturned = dataReturned.data;
      }
    });
    return await modal.present();
  }

}

 

src/app/qr-scan.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>qr-scan</ion-title>
    <ion-buttons slot="end">
      <button ion-button icon-only color='black' (click)="closeModal()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

 

src/app/qr-scan.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-qr-scan',
  templateUrl: './qr-scan.page.html',
  styleUrls: ['./qr-scan.page.scss'],
})
export class QrScanPage implements OnInit {

  constructor(
    private navParams: NavParams, 
    private modalController: ModalController
  ) {
    console.log(navParams.get('param1')); 
  }

  ngOnInit() {
  }

  closeModal() { 
    this.modalController.dismiss({
      paramFromModal: 'good bye'
    }); 
  }
}

 

 

 

 

ionic 차례