http://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
Ionic1이나 Angular1 백그라운드가 다면 URL, state등으로 라우팅을 Ionic2에서도 사용은 가능하다 하지만 많은 주의가 필요하므로 권장하지 않는다.
Ionic2는 View를 push/pop하는 네비게이션 스택으로 운영된다.
이를 구현하는 방법을 배우기 전에 어떻게 동작하는지에 대해 먼저 이해해보자.
Push/Pop
root page가 고양이 그림이 그려진 종이가 테이블에 올려져 있다고 상상해보자.
이제 개그림이 그려진 종이를 올려보자. 그러면 개그림이 제일 위에 있게 된다. 그리고 고양이는 여전히 개그림 아래에 놓여져 있게 된다.
이번에 소그림이 그려진 종이를 올려보자. 소그림이 제일 위에 있고 고양이과 개그림도 여전히 놓여져 있다.
이제 개그림을 보려면 쌓여진 종이의 맨위 그림을 버리면 된다. 이어서 고양이그림을 보려면 한번더 맨위의 그림을 버리면 된다.
히스토리를 관리하는 아주 편리한 네비게이션방안이고 차일드뷰가 많은 경우 이해하기 쉽다. 하지만 항상 그런것은 아니다. 어떤 경우는 바로 이전페이지가 아니라 다른 페이지로 이동하고자 할 경우도 발생하기 마련이다(로그인 페이지에서 메인페이지로 이동하는경우).
이 경우 우린느 root page를 변경할 수 있다.
위 예에서 소그림을 root page로 할 수 있다.
언제 push하고 언제 root page로 해야 하나?
현재뷰의 차일드로 전환하고자 하는 경우 또는 새로운 뷰에서 이전뷰로 돌아오기를 원한다면 push를 해야한다.
현재뷰의 차일드가 아니거나 애플리케이션의 다른 섹션으로의 이동이라면 root page를 변경해야 한다.
root page와 root component는 다르다. root component(보통 app.component.ts)가 root page를 정의한다.
Ionic2 네비게이션 기초
NavController를 import해야 한다.
import { NavController } from 'ionic-angular';
그리고 생성자에서 inject해야 한다.
@Component ({
templateUrl: 'home.html',
})
export clas MyPage {
constructor(public navCtrl: NavController) {
}
}
NavController의 레퍼런스가 생기고 클래스내 어디에서든지 사용이 가능하다. 이제 어떻게 push/pop을 하는지 보자
페이지를 push하려면
this.navCtrl.push(SecondPage);
앞에서 inject한 navCtrl로 push하였다. 이렇게 하려면 SecondPage가 import되어야 한다.
import { SecondPage } from '../second-page/second-page';
이제 코드내에서 push를 호출하면 새로운 페이지가 표시될것이고 nav bar에 자동으로 백버튼이 생성이 될것이다.
pop을 언제 할것인지 고민하지 말라. 백버튼을 누르면 알어서 pop해줄것이다.
수동으로 이전 페이지로 이동하고자 한다면 명시적으로 pop을 호출한다.
this.navCtrl.pop();
이번엔 root page를 변경한는 방법이다. app.ts에 rootPage를 정의하였을 것이다.
rootPage: any = MyPage;
root component의 rootPage변수에 root page를 셋팅할것이다. root page를 변경하려면 NavController의 setRoot함수를 호출하면 그만이다.
this.navCtrl.setRoot(SecondPage);
Ionic2에서 페이지간 데이터 전송
모바일애플리케이션에서는 보통 페이지간의 데이터를 전달할 방법이 필요하다. Ionic2에서는 NavParams로 가능하다. push로 페이지 호출할때 파라메터를 생성하여 전달하는 방법이 있다. 이 방법은 setRoot시에도 동일하게 적용된다.
this.navCtrl.push(SecondPage, { thing1: data1, thing2: data2});
추가 파라메터가 더해진것 말고 이전과 사용법이 동일하다. 호출되는 페이지에서는 NavParams를 생성자에서 inject해야 한다.
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component ({ templateUrl: 'second-page.html'})
export class SecondPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
이제 파라메터에 접근하려면 아래와 같이 하면 된다.
this.navParams.get('things');
