Ionic 4: วิธีสร้าง Link โดยตรงจาก HTML และ Routing

จาก Ionic Training Workshop มีหลายๆ คนสงสัยว่า มีวิธีสร้าง link ง่ายๆ ในหน้าแอพของเรา นอกจากใช้ NavController ใน TypeScript ไหม

จริงๆ มีครับ และถ้าเราเข้าใจกลไกการทำงานของ Routing แล้ว ก็สามารถใช้ได้ทันทีเลย นั่นคือการใช้ RouterLinkนั่นเอง

RouterLink ลิ้งค์ง่ายๆ พร้อมใช้กับ Angular Routing

อย่างเช่นในที่นี้ เรามี app-routing.module.tsที่มี path ของ Page ต่างๆ กำหนดไว้แล้ว

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'plus', loadChildren: './plus/plus.module#PlusPageModule' },
  { path: 'subtract', loadChildren: './subtract/subtract.module#SubtractPageModule' },
  { path: 'multiply', loadChildren: './multiply/multiply.module#MultiplyPageModule' },
];

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

เราก็สามารถกำหนด routerLink เป็น attribute ใน ฝั่งของ HTML ได้เลย

<ion-header>
  <ion-toolbar>
    <ion-title>
      Calculator API
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item routerLink="/plus">
      <ion-label>Plus</ion-label>
    </ion-item>
    <ion-item routerLink="/subtract">
      <ion-label>Subtract</ion-label>
    </ion-item>
    <ion-item routerLink="/multiply">
      <ion-label>Multiply</ion-label>
    </ion-item>
  </ion-list>

</ion-content>

ในที่นี้ ข้อแตกต่างจาก href จะเป็นการใช้ transition และระบบ Routing ของ Angular ได้อย่างสมบูรณ์

เริ่มต้นกับ Ionic Framework เข้าใจง่าย รู้จริง

ไม่ต้องเสียเวลาลองผิด ลองถูก เข้าใจง่ายกับเนื้อหาที่ออกแบบเป็นอย่างดี ดูรายละเอียดรอบอบรมได้ที่นี่ครับ

หรือติดต่อบริการ In-house/on-site ได้ที่โทร 083-071-3373 ครับ