Ionic & component 데이터 이동 예시 on Angular

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {

  }

  async presentModal() { // 모달 열기 메소드
    const modal = await this.modalController.create({
      component: ModalPage // 연결할 페이지 컴포넌트, 템플릿
    });
    return await modal.present();
  }
}

1. 페이지 컴포넌트

 

 

 

 

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

@Component({
  selector: 'modal-page',
})
export class ModalPage {

  constructor() {

  }

}

2. 모달 컴포넌트 : 데이터 받기 위해 심볼 로드합니다.

 

 

 

 

 

 

async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      'key': 'value',
      'key': 'value',
    }
  });
  return await modal.present();
}

3. 페이지 컴포넌트에 모달을 생성과 동시에 전달할 데이터를 설정합니다.

 

 

 

 

 

export class ModalPage {

  // Data passed in by componentProps
  @Input() firstName: string;
  @Input() lastName: string;
  @Input() middleInitial: string;

  constructor(navParams: NavParams) {
    // componentProps can also be accessed at construction time using NavParams
    console.log(navParams.get('firstName'));
  }

}

4. 모달 페이지에서 생성과 동시에 값을 가져올 수 있습니다.