Ionic 4 và Angular: Tab

---

Các tab! Chúng là một cách ổn định để quản lý nhiều chế độ xem trong các ứng dụng hiện đại. Trong bài viết này, ta sẽ xem xét cách sử dụng Tab với Ionic 4.

Ta sẽ sử dụng Ionic và Angular cho ví dụ này, nhưng vì các thành phần Ionic là các Thành phần Web tiêu chuẩn, quá trình này tương tự nhau trên các khuôn khổ.

Lưu ý: Trong khi bạn có thể bắt đầu một dự án Ionic mới với mẫu tabs , thay vào đó, bài viết này sẽ xem xét việc tích hợp tabs vào một dự án hiện có .

Dự án mới

Trước tiên, hãy khởi tạo một dự án mới bằng Ionic CLI:

# Install the Ionic CLI, if you don't have it installed already:
$ npm i ionic -g

# Create a new project
$ ionic start ionicTabs blank

# Change directory
$ cd ionicTabs

# Open up the project in VS Code or editor of your choice
$ code .

# Run the project in the browser
$ ionic serve

Bây giờ ta đã có một dự án Ionic 4 và Angular đang hoạt động. Hãy tạo một số trang mới để tạo nền tảng cho hệ thống tab của ta :

# Main page that serves our tabs
$ ionic generate page tabs

# Individual tabs
$ ionic generate page tab1
$ ionic generate page tab2
$ ionic generate page tab3

Ở giai đoạn này, ta có thể tiếp tục và thêm bất kỳ nội dung nào ta muốn vào mỗi tab. Đối với ví dụ này, ta sẽ đưa ra các giả định sau:

1. Tab1 -> Trang chủ
2. Tab2 -> Nguồn cấp dữ liệu
3. Tab3 -> Cài đặt

Do đó, tôi đã cập nhật HTML để phản ánh điều này, trên mỗi tab:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

tabs.page.html chính của ta chứa mỗi tab và ta có thể thêm một ion-tabs ion-tab-bar có tham chiếu đến tab của ta theo tuyến:

<ion-tabs>

  <ion-tab-bar slot="bottom" color="primary">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Bây giờ ta có thể cài đặt định tuyến cho trang tabs mình. Hãy đặt trang tabs thành tuyến mặc định bên trong app-routing.module.ts của ta :

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

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
@NgModule({
  imports:
    [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
  exports:
    [
      RouterModule
    ]
})
export class AppRoutingModule {}

Khi user truy cập vào tuyến mặc định, ta cần xử lý tab nào sẽ được hiển thị. Tạo một file mới có tên tabs-routing.module.ts bên trong folder tabs với nội dung sau:

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: '../tab1/tab1.module#Tab1PageModule'
              }
            ]
        },
        {
          path: 'tab2',
          children:
            [
              {
                path: '',
                loadChildren: '../tab2/tab2.module#Tab2PageModule'
              }
            ]
        },
        {
          path: 'tab3',
          children:
            [
              {
                path: '',
                loadChildren: '../tab3/tab3.module#Tab3PageModule'
              }
            ]
        },
        {
          path: '',
          redirectTo: '/tabs/tab1',
          pathMatch: 'full'
        }
      ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

Như bạn thấy , ta đang xuất một module có chứa cấu hình tuyến đường cho các tab của ta . Đường path (tức là tab1 ) phải tương ứng với nút ion-tab-button như được thấy bên trong tabs.page.html của ta :

<ion-tab-button tab="tab1">
  <ion-icon name="home"></ion-icon>
  <ion-label>Home</ion-label>
</ion-tab-button>

Cuối cùng, ta cần nhập module này vào bên trong tabs.module.ts của ta :

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { TabsPageRoutingModule } from './tabs-routing.module';

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

@NgModule({
  imports:
    [
      IonicModule,
      CommonModule,
      FormsModule,
      TabsPageRoutingModule
    ],
  declarations:
    [
      TabsPage
    ]
})
export class TabsPageModule {}

Bây giờ ta có thể chuyển trong ứng dụng của bạn bằng cấu trúc tab!

---

---

Các tin liên quan