IONIC 간단한 nav 개념잡기

기본적인 페이지 이동

ionic 은 router 의 개념이 stack을 통해 view 를 push/pop 하는 형식이다.(이것은 한글인가 영어인가….)

1
2
3
4
5
6
7
8
9
10
11
import {NavController} from 'ionic-angular';
.....

@Component({
	templateUrl: 'yourIndex.html';
})
export class IndexPage{
	constructor(
		public navCtrl:NavController){
	}
}

여기서 클래스 이름 그대로 NavController 가 네비게이션 컨트롤러 역할을 한다. 페이지를 넘기고 싶다면 push 를 이용해서 이동하고 싶은 페이지의 컴포넌트를 입력시키면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {NavController} from 'ionic-angular';
.....
import {SecondPage} from '../Component/SecondPage/SecondPage';


@Component({
	templateUrl: 'yourIndex.html';
})
export class IndexPage{
	constructor(
		public navCtrl:NavController){
	}

	moveToSecond(){
		this.navCtrl.push(SecondPage); //push 를 이용한 페이지 이동
	}
}

페이지간 데이터 전송

페이지간 데이터를 전송하고 싶다면 push에 파라메터로 넘기고싶은 데이터의 Object를 파라메터로 넘겨주고, 받는 페이지에서는 navParams.get() 을 이용해서 받으면 된다.

  • 파라메터를 넘기는 IndexPage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {NavController} from 'ionic-angular';
.....
import {SecondPage} from '../Component/SecondPage/SecondPage';


@Component({
	templateUrl: 'yourIndex.html';
})
export class IndexPage{
	constructor(
		public navCtrl:NavController){
	}

	moveToSecond(){
		this.navCtrl.push(SecondPage,{msg: "It's work!!"}); // 컴포넌트에 msg 라는 파라메터 넘김
	}
}
  • 파라메터를 받는 SecondPage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {NavController, NavParams} from 'ionic-angular';
....

@Component({
	templateUrl: 'yourSecond.html';
})
export class SecondPage{
	constructor(
		public navCtrl:NavController, 
		public navParams:NavParams){
	}

	ionViewDidLoad() {
    console.log(this.navParams.get('msg')); // 파라메터에 접근
  }
}

rootPage 설정

페이지가 이동을 하면 새로 root 페이지를 설정해줘야 할 때가 있다. 예를들면 로그인 이후 화면? 같은것을 예로 들 수 있다. setRoot()를 이용하면 root 페이지를 바꿀 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {NavController, NavParams} from 'ionic-angular';
....

@Component({
	templateUrl: 'yourSecond.html';
})
export class SecondPage{
	constructor(
		public navCtrl:NavController, 
		public navParams:NavParams){
	}

	ionViewDidLoad() {
    console.log(this.navParams.get('msg')); // 파라메터에 접근
		this.navCtrl.setRoot(SecondPage); // SecondPage로 root를 바꾼다
  }
}

setRoot() 사용시 주의점은 root를 바꿔주면서 해당 페이지로 이동시키기 때문에 setRoot() 를 사용하는 지점을 잘 생각해야 한다. 실수로 자기 자신을 루트로 잡아봤는데 무한루프가 도는 것을 볼 수 있었다.

참조 사이트
http://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
고 투 더 멘토