타킷 ionic2

1. Ionic2 component
(tabs, page navigation)
kalen.lee@takit.biz
0505-170-3636
www.takit.biz
https://github.com/raceyi/Ionic2Samples/

2. Tabs
• http://ionicframework.com/docs/v

3. navigator
• setRoot, push, pop
• viewDidLoad, viewDidEnter, viewWillUnload, etc
• 로그인한 이후 tabs페이지로 이동합니다.
http://ionicframework.com/docs/api/navigation/NavController/

4. Tabs페이지 생성
• NextTabs페이지를 만들어 봅니다.
cd src
ionic g page nextTabs
ionic g page page1
ionic g page page2
ionic g page page3

5. Page 이동
Login NextTabs Tabs
Page1
Page2
Page3
Home
about
exit
this.navCtrl.push()
this.navCtrl.setRoot()
this.app.getRootNav().push()
this.navCtrl.pop()
select()

6. tabs페이지에서 tabs페이지로 이
동
• page1의 버튼을 클릭하여 tabs페이지로 이동합니다.
http://ionicframework.com/docs/api/components/app/App/참조
• exit탭을 추가하여 다시 page1으로 돌아옵니다.

7. Tabs api사용
• tab에서 다른 tab으로 이동
• exit을 통해 nextTabs로 돌아왔을때 page2가 보여지
도록 하는방법

8. ionic component직접사용
하기
1. id지정
2. ViewChild로 가져오기
3. Component의 api호출
*주의: constructor에서 component는 undefined임