ionic 하이브리드 앱 개발 - #5 navigation 네비게이션

ionic3에서는 모바일 환경을 중심으로 단순화되고 있으며, ionic3에서는  향상된 네비게이션 기능을 위해 @IonicPage 데코레이터가 도입되었습니다. 먼저 네이게이션 기능을 살펴보도록 하겠습니다.

기본 네비게이션

src/app/app.html 파일을 열고 내용을 살펴보면, 아래와 같은 내용을 확인할 수 있습니다.

<ion-nav [rooot]="rootPage"></ion-nav>

ion-nav는 NavController의 하위 클래스 이며, 네이게이션 스택과 작업하기 위한 용도로 사용됩니다. ion-nav가 제대로 동작하려면 루트 페이지가 @component 인, 루트페이지를 초기에 로드하도록 설정해야 합니다.

import {StartPage} from 'start'

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
  // First page to push onto the stack
  rootPage = StartPage;
}

다음으로 각 page 에서 네비게이션 Controller 에 접근하기 위하여 생성자를 통해 NavController를 주입받아 사용할 수 있습니다. page component는 셀렉터가 필요하지 않으며, ionic page는 자동으로 추가 될 수 있습니다.

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Login</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>Hello World</ion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
}
한 페이지에서 다른 페이지로 이동하려면 새 페이지를 NavController 에 push 하거나 pop합니다.

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Login</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>
    <button (click)="goToOtherPage()">
      Go to OtherPage
    </button>
  </ion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {}

  goToOtherPage() {
    //push another page onto the history stack
    //causing the nav controller to animate the new page in
    this.navCtrl.push(OtherPage);
  }
}

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Page</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {}

페이지에 <ion-navbar>가 있으면 root page 이며,  root pag e가  아닌 경우 뒤로 버튼이 자동으로 추가되고 탐색 메뉴의 제목이 업데이트됩니다.  또는 돌아가고 싶지만 NavBar가없는 경우 스택에서 현재 페이지를 pop 할 수 있습니다.

@Component({
  template: `
  <ion-content>
    <button (click)="goBack()">
      There's no place like home
    </button>
  </ion-content>`
})
class OtherPage {
  constructor(public navCtrl: NavController) {}

  goBack() {
    this.navCtrl.pop();
  }
}

Root Page 에서 네비게이팅 하는 방법

Root  App Component 에서 Navigation 을 제어하려면 어떻게 해야 할까요?   NavController Component는 Root App Component의 하위 요소이므로 NavController를  삽입 할 수 없습니다. 다른 방법으로 ion-nav 에 참조 변수를 추가하면 @ViewChild를 사용하여 NavController(NavController를 확장형태) 인 Nav 구성 요소의 인스턴스를 가져올 수 있습니다.

@Component({
  template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  @ViewChild('myNav') nav
  rootPage = TabsPage;

  // Wait for the components in MyApp's template to be initialized
  // In this case, we are waiting for the Nav identified by
  // the template reference variable #myNav
  ngAfterViewInit() {
    // Let's navigate from TabsPage to Page1
    this.nav.push(LoginPage);
  }
}