ionic start ActionSheetExample blank
아무 것도 없는 공백 아이오닉 프로젝트를 만듭니다.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
app.module.ts를 들어가보면 HomePage가 보입니다. /src/pages/home/home.ts로 이동해야 Action Sheet를 쓸 수 있을 것 같습니다.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
}
지금은 어떤 메서드도 없는 공백 컴포넌트입니다. 여기에 Action Sheet를 사용할 수 있도록 만들면 root-page에서 우리가 원하는 결과를 볼 수 있습니다.
import { NavController, ActionSheetController } from 'ionic-angular';
NavController 옆에 이런식으로 ActionSheetController를 추가해줍니다. import ~ from으로 새로 넣어도 되지만 같은 곳에서 참조하기 때문에 컴마로 구분해서 넣어주는 것이 대부분의 경우 보기 좋습니다.
constructor(public navCtrl: NavController, public actionSheetCtrl: ActionSheetController) {
}
생성자 부분도 새로 추가해주어야 Action Sheet를 사용할 수 있으니 추가해줍시다.
이제 메서드를 만들어야 클릭할 때 원하는 문구들을 뜨게 할 수 있으니 메서드를 추가해봅시다.
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create(
{
title: "Modify your album",
buttons: [
{
text: "Destuctive",
role: "ROLE:: Destructive",
handler: ()=> {
console.log('Destructive clicked')
}
},
{
text: "Archive",
handler: ()=> {
console.log("Archive clicked")
}
},
{
text: "Cancel",
role: "ROLE:: Cancel",
handler: ()=> {
console.log("Cancel clicked")
}
}
]
}
);
actionSheet.present();
}
참고로 타입스크립트에서는 var말고도 let변수가 있는데 var보다 엄격한 타입이라고 생각하시면 됩니다. (변수명 중복 불가 / 호출 시점 구분/블록 스코프 구분)
this.actionSheetCtrl.create()에서 어떤 값들이 Action Sheet에 뜨게 할 것인지 설정하고, 설정 끝에 actionSheet.present()를 통해 해당 메서드를 동작하면 Action Sheet가 뜨도록 합니다.
모두 추가했다면 home.html로 이동해서 버튼과 버튼에 해당하는 이벤틀르 추가해줍시다.
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click) = "presentActionSheet()">
SHOW ACTION SHEET
</button>
</ion-content>
blank옵션을 줬을 때 기본으로 생성되는 페이지에 버튼만 추가했습니다.
button 태그는 이름만 보고도 알 수 있듯이 버튼을 만들어주는 역할을 하고, ion-button은 아이오닉에서 지원하는 버튼 모양입니다. ion-button을 넣지 않으면 <input type=file>의 '찾아보기' 같은 모습의 버튼이 보입니다. (click)="메서드()"를 통해 우리가 버튼을 누를 경우 이벤트에 의해 어떤 메서드가 발생하게 할지 정합시다. 저장하면 새 페이지가 로딩되면서 버튼이 추가된 것을 보실 수 있습니다.
[버튼 누르기 전]
[버튼 누른 후]
