[하이브리드앱 ionic]시작해보기 8 - 모달창(ion-modal) 만들기

tab1 html 에 버튼을 만듭니다.

<ion-button (click)=presentModal();>버튼 </ion-button>

버튼을 클릭했을때  presentModal로 모달창을 엽니다.

 

tab1.page.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { OnepagePage } from '../onepage/onepage.page';

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

  constructor(public modalController: ModalController) {}
  async presentModal() {
    const modal = await this.modalController.create({
      component: OnepagePage,
      animated: true,

    });
    return await modal.present();
  }

}

onpage를 모달창으로 열기로 정의 합니다. 

[아이오닉] - [아이오닉] 아이오닉 퍼블리싱 시작해보기 3 - 새로운 페이지 추가

[아이오닉] 아이오닉 퍼블리싱 시작해보기 3 - 새로운 페이지 추가

 

tab1.module.ts

 

 

NgModule에 OnepagePage를 추가해줍니다. 

declarations = 이 모듈에서 사용하는 뷰를 정의합니다. 

entryComponents = 구성요소 템플릿 

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { OnepagePage } from '../onepage/onepage.page';
import { OnepagePageModule } from '../onepage/onepage.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page,OnepagePage],
  entryComponents: [Tab1Page, OnepagePage]
})
export class Tab1PageModule {}

 

 

 

이렇게 추가 후 

onepage에 모달창에 들어갈 내용을 작성하면된다.