概要

Top・Contactができたので、tabを設置してtabでTopとContactを行き来できるようにします。

完成イメージ

タブバー実装

Top・Contactが入るページを作成します。
routingでタブができます。

ionic generate page tabnav

srcフォルダにtabnavフォルダができてファイルができているのが確認できます。

アプリを起動したら、Tabnavが表示されるようにルーティングを変更します。

app-routing.module.ts

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

const routes: Routes = [
+ {
+   path: '',
+   loadChildren: () => import('./tabnav/tabnav.module').then(m => m.TabnavPageModule)
+ },
- {
-   path: 'home',
-   loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
- },
- {
-   path: '',
-   redirectTo: 'home',
-   pathMatch: 'full'
- },
- {
-   path: 'contact',
-   loadChildren: () => import('./contact/contact.module').then( m => m.ContactPageModule)
- },
- {
-   path: 'tabnav',
-   loadChildren: () => import('./tabnav/tabnav.module').then( m => m.TabnavPageModule)
- },
];

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

コピペ用

  {
    path: '',
    loadChildren: () => import('./tabnav/tabnav.module').then(m => m.TabnavPageModule)
  },

これでアクセスができるのはTabnavのみになります。
Tabnavが他の画面を含むようにします。
tabnavのルーティングを設定していきます。tabnav-routing.module.tsを開いて編集します。

tabnav-routing.module.ts

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

import { TabnavPage } from './tabnav.page';

+ const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabnavPage,
+    children: [
+      {
+        path: 'home',
+        loadChildren: () =>
+          import('../home/home.module').then((m) => m.HomePageModule),
+      },
+      {
+        path: 'contact',
+        loadChildren: () =>
+          import('../contact/contact.module').then((m) => m.ContactPageModule),
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/home',
+    pathMatch: 'full',
+  },
+];

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

コピペ用

const routes: Routes = [
  {
    path: 'tabs',
    component: TabnavPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'contact',
        loadChildren: () =>
          import('../contact/contact.module').then((m) => m.ContactPageModule),
      },
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full',
  },
];

routingができたので、ページをそれぞれ示します。
ion-tabsコンポーネントはスタイルを持たず、ナビゲーションを処理するために動作します。タブを切り替えるため、ion-tabsの中でion-tab-barを用意します。

tabnav.page.html

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home">
        <ion-icon name="home"></ion-icon>
        <ion-label>Top</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="contact">
        <ion-icon name="information-circle-outline"></ion-icon>
        <ion-label>お問合せ</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

Headerを各ページにつけます。

サンプル

<ion-header>
  <ion-toolbar translucent>
    <ion-title text-left>Title</ion-title>
  </ion-toolbar>
</ion-header>

今回は「contact.page.html」と「home.page.html」で下記のように設定します。

home.page.html

<ion-header>
  <ion-toolbar translucent>
    <ion-title text-left>TOP</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="Top">
    <p id="Title">bluecode, Lifestyle developer.</p>
  </div>
  <div id="Content">
    <p>websiteの最新情報</p>
    <p>最新の情報をご案内します。</p>
  </div>
</ion-content>

contact.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>CONTACT</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="container">
    <strong>お問い合わせ</strong>
    <form id="form" [formGroup]="ionicForm" (ngSubmit)="submitForm()">
<!-- 省略 -->

ionic/Androidで確認すると、タブが作成されて、遷移も可能になりました。

関連コンテンツ