ตัวอย่าง custom route ใน angular

Angular
Created At :
Views 👀 :

ตัวอย่าง custom route ใน Angular มีดังนี้

การกำหนดเส้นทางแบบไดนามิก

เราสามารถใช้การกำหนดเส้นทางแบบไดนามิกเพื่อโหลดคอมโพเนนต์ที่แตกต่างกันขึ้นอยู่กับข้อมูลที่ผู้ใช้ป้อนเข้ามา ตัวอย่างเช่น เราสามารถสร้างเส้นทางที่โหลดคอมโพเนนต์ ProductComponent ที่มีข้อมูลของผลิตภัณฑ์เฉพาะ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductComponent } from './product/product.component';

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  declarations: [
    ProductComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'products',
    component: ProductsComponent,
  },
  {
    path: 'products/:id',
    component: ProductComponent,
    data: {
      productId: '[id]',
    },
  },
];

ในตัวอย่างนี้ เรากำหนดเส้นทาง /products/:id ที่โหลดคอมโพเนนต์ ProductComponent ที่มีข้อมูลของผลิตภัณฑ์ที่มี ID ที่กำหนดโดยพารามิเตอร์ id

การกำหนดเส้นทางแบบหลายระดับ

เราสามารถใช้การกำหนดเส้นทางแบบหลายระดับเพื่อโหลดคอมโพเนนต์ที่อยู่ภายในคอมโพเนนต์อื่นๆ ตัวอย่างเช่น เราสามารถสร้างเส้นทางที่โหลดคอมโพเนนต์ AboutComponent ที่อยู่ภายในคอมโพเนนต์ HomeComponent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  declarations: [
    HomeComponent,
    AboutComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'about',
        component: AboutComponent,
      },
    ],
  },
];

ในตัวอย่างนี้ เรากำหนดเส้นทาง / ที่โหลดคอมโพเนนต์ HomeComponent และ /about ที่โหลดคอมโพเนนต์ AboutComponent ซึ่งอยู่ภายในคอมโพเนนต์ HomeComponent

การกำหนดเส้นทางแบบ lazy loading

เราสามารถใช้การกำหนดเส้นทางแบบ lazy loading เพื่อโหลดคอมโพเนนต์เฉพาะเมื่อผู้ใช้เข้าถึงเส้นทางนั้น สิ่งนี้สามารถช่วยเพิ่มประสิทธิภาพของแอปพลิเคชันโดยโหลดเฉพาะคอมโพเนนต์ที่จำเป็นเท่านั้น

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  declarations: [
    HomeComponent,
    AboutComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule),
  },
];

ในตัวอย่างนี้ เรากำหนดเส้นทาง /about ที่โหลดคอมโพเนนต์ AboutComponent จากโมดูล AboutModule เมื่อผู้ใช้เข้าถึงเส้นทาง /about โมดูล AboutModule จะโหลดและคอมโพเนนต์ AboutComponent จะแสดง

สรุป

การกำหนดเส้นทางแบบ custom ใน Angular เป็นเครื่องมือที่ทรงพลังที่ช่วยให้เราสามารถปรับแต่งเส้นทางของแอปพลิเคชันของเราได้ตามต้องการ เราสามารถกำหนดเส้นทางแบบไดนามิก แบบหลายระดับ และแบบ lazy loading เพื่อตอบสนองความต้องการที่แตกต่างกันของแอปพลิเคชันของเรา

©2023 Love Computer