[ionic5] tab navigation 생성하기

기본적으로 ionic 프로젝트를 생성할 때 'tabs' 라는 옵션을 통해서 tab navigation을 갖춘 프로젝트를 만들 수 있다.

하지만, 나는 처음 시작하는 것이고 구조를 이해하기 위해 빈 프로젝트를 생성해 직접 tab navigation을 만들어보았다.!

 

빈 공간에 무언가를 채워가는 일은 정말 재미있는 것 같다 :)

 

 

1. ionic 프로젝트 생성

$ ionic start tab_navigation blank

 

2. tab을 관리해주는 tabs 페이지와 tab 안에 들어갈 여러 개의 페이지를 생성해준다.

- pages/ 라는 폴더에 생성되는 페이지를 모두 넣어 관리한다.

$ ionic g page pages/tabs
$ ionic g page pages/tab1
$ ionic g page pages/tab2
$ ionic g page pages/tab3

 

3. tabs.page.html

- tab 이라는 곳에 페이지이름을 넣어준다.

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="main">
      <ion-icon name="tab1"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="grid"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

 

4. tabs-routing.module.ts

- component 아래 children을 추가해준다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.TabPageModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule {}

 

5. app-routing.module.ts

- tabs 페이지를 상단으로 올려야 적용됨!!

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'tab1',
    pathMatch: 'full'
  },
  {
    path: '',
    loadChildren: () => import('./pages/tabs/tabs.module').then( m => m.TabsPageModule)
  },
  {
    path: 'tab1',
    loadChildren: () => import('./pages/tab1/tab1.module').then( m => m.Tab1PageModule)
  },

  {
    path: 'tab2',
    loadChildren: () => import('./pages/tab2/tab2.module').then( m => m.Tab2PageModule)
  },
  {
    path: 'tab3',
    loadChildren: () => import('./pages/tab3/tab3.module').then( m => m.Tab3PageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }