반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- MAC
- IOS
- picker
- MachineLearning
- Chrome
- 네트워크
- localserver
- qunit
- react
- xcode
- avds
- TensorFlow
- unittest
- PYTHON
- centos
- vsCode
- webpack
- VirtualBox
- build
- Android
- jest
- ReactNative
- node
- 맥
- 리눅스
- 개발
- linux
- androidstudio
- 센토스
Archives
- Today
- Total
로메오의 블로그
[IONIC] tab navigation 구현하기 본문
반응형
프로젝트 생성
$ ionic start first-project sidemenu type=angular
$ cd first-project
페이지 생성
$ ionic generate page tabs
$ ionic generate page tab1
$ ionic generate page tab2
$ ionic generate page detail
src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
src/app/tabs/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () =>
import('../tab1/tab1.module').then(m => m.Tab1PageModule)
},
{
path: 'hospital',
children: [
{
path: '',
loadChildren: () =>
import('../detail/detail.module').then(m => m.DetailPageModule)
}
]
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: () =>
import('../tab2/tab2.module').then(m => m.Tab2PageModule)
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: () =>
import('../tab3/tab3.module').then(m => m.Tab3PageModule)
}
]
},
{
path: 'tab4',
children: [
{
path: '',
loadChildren: () =>
import('../tab4/tab4.module').then(m => m.Tab4PageModule)
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
src/app/tab1/tab1.page.html
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Tab One
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item (click)="goDetail()" routerDirection="forward">
<ion-icon slot="start" color="medium" name="medkit"></ion-icon>
<ion-label>상세보기</ion-label>
</ion-item>
<ion-item routerLink="/tabs/detail/detail" routerDirection="forward">
<ion-icon slot="start" color="medium" name="medkit"></ion-icon>
<ion-label>상세보기</ion-label>
</ion-item>
</ion-content>
src/app/tab1/tab1.page.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor(
private router: Router
) {}
goDetail() {
this.router.navigateByUrl('/tabs/detail/detail')
}
}
src/app/detail/detail.page.ts
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab1" routerDirection="back"></ion-back-button>
</ion-buttons>
<ion-title>상세보기</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
반응형
'Frontend > angular' 카테고리의 다른 글
[IONIC] Firebase 연동하기 (0) | 2020.02.04 |
---|---|
[IONIC] angular http 통신 (0) | 2020.02.04 |
[IONIC] IONIC Cordova에서 codepush 설치 - appcenter (0) | 2020.02.03 |
[Ionic] Ionic 주요 명령어 정리 (0) | 2020.01.28 |
[Ionic] alert, toast, confirm 사용 (2) | 2020.01.17 |
Comments