Ionic root 문제

ionic을 사용하다 보면 페이지 컨트롤을 위해서 자연적으로 NavController를 사용하게 되는데, 정확히 파악하지 않은 상태에서 NavCtrl을 사용하다 보니 내가 생각했던 구조대로 앱이 만들어지지 않고 있다는 것을 깨닫게 되었다.

문제점

우선 내가 의도한 구조는 이렇다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
app<Nav>{
	LoginPage,
	UserPage<Nav>:[
		page1,
		page2,
		page3,
		.....
	],
	StudyPage<Nav>:[
		page1,
		page2,
		page3,
		.....
	],
}

하지만 내가 만든 구조는 이렇게 되어있었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
app<Nav>{
	LoginPage,
	UserPage<Nav>:[
		page1,
		page2,
		page3,
		.....
		StudyPage<Nav>:[
			page1,
			page2,
			page3,
			.....
		]
	]
}

상황이 심각하다.

문제인식

구조가 잘못되고 있다는것을 인식한 것은 UserPage에서 생성한 css 가 StudyPage에 영향을 미치고 있는걸 보고 알게 되었다. 기본적으로 ionic은 각 페이지 별로 css 정의를 할 수 있고, 자식 컴포넌트가 아니면 css간 영향이 없다.

원인

공식 홈페이지나 구글링을 통해 얻을 수 있는 Tutorial 을 따라하다 보면 navCtrl.push(), navCtrl.pop(), navCtrl.setRoot() 에 관한 설명은 잘 되어있으나 그 이상은 설명되어 있지 않으며 여기서 필자의 경우엔 setRoot() 의 작동방식을 착각한 것이 원인이었다.

해결

여기 저기에서 사용한 setRoot()는 해당 컴포넌트에 ion-nav 를 사용하지 않으면 부모 컴포넌트의 ion-nav 를 바꿔주었지만, 컴포넌트에 ion-nav 가 있는 경우 해당 컴포넌트의 ion-nav를 바꿔준다. 그래서 최상단의 navCtrl을 가져오기 위해선 App을 가져와야 한다.

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

@Component({
	selector: 'your-selector',
	templateUrl: 'your-template.html'
})
export class YourPage{
	constructor(
		public navCtrl: NavController,
		public navParams: NavParams,
		public appCtrl: App
	){}
	...........
	moveToPage(){
		// getRootNav()는 최상단의 nav를 가져온다.
		this.appCtrl.getRootNav().setRoot(NextPage);
	}
}

출처

stack overflow