[IONIC] tab navigation 구현하기

ionic 차례

프로젝트 생성

$ 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>

 

 

ionic 차례