เชิงมุม 2 - การกำหนดเส้นทาง

การกำหนดเส้นทางช่วยในการนำผู้ใช้ไปยังเพจต่างๆตามตัวเลือกที่พวกเขาเลือกในหน้าหลัก ดังนั้นขึ้นอยู่กับตัวเลือกที่พวกเขาเลือกส่วนประกอบเชิงมุมที่ต้องการจะแสดงผลให้กับผู้ใช้

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

Step 1 - เพิ่มแท็กอ้างอิงพื้นฐานในไฟล์ index.html

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- สร้างสองเส้นทางสำหรับแอปพลิเคชัน สำหรับสิ่งนี้ให้สร้าง 2 ไฟล์ที่เรียกว่าInventory.component.ts และ product.component.ts

Step 3 - วางรหัสต่อไปนี้ในไฟล์ product.component.ts

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - วางรหัสต่อไปนี้ในไฟล์ Inventory.component.ts

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

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

Step 5 - ในไฟล์ app.module.ts ให้เพิ่มรหัสต่อไปนี้ -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

ประเด็นต่อไปนี้ต้องสังเกตเกี่ยวกับโปรแกรมข้างต้น -

appRoutes ประกอบด้วย 2 เส้นทางหนึ่งคือส่วนประกอบของ Appproduct และอีกทางหนึ่งคือส่วนประกอบ AppInventory
ตรวจสอบให้แน่ใจว่าได้ประกาศทั้งสององค์ประกอบ
RouterModule.forRoot ช่วยให้มั่นใจได้ว่าจะเพิ่มเส้นทางไปยังแอปพลิเคชัน

Step 6 - ในไฟล์ app.component.ts ให้เพิ่มรหัสต่อไปนี้

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

ประเด็นต่อไปนี้ต้องสังเกตเกี่ยวกับโปรแกรมข้างต้น -

<router-outlet> </router-outlet> เป็นตัวยึดเพื่อแสดงผลองค์ประกอบตามตัวเลือกที่ผู้ใช้เลือก

ตอนนี้บันทึกรหัสทั้งหมดและเรียกใช้แอปพลิเคชันโดยใช้ npm ไปที่เบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้

ตอนนี้ถ้าคุณคลิกลิงก์สินค้าคงคลังคุณจะได้ผลลัพธ์ต่อไปนี้

การเพิ่มเส้นทางข้อผิดพลาด

ในการกำหนดเส้นทางเราสามารถเพิ่มเส้นทางข้อผิดพลาดได้ สิ่งนี้สามารถเกิดขึ้นได้หากผู้ใช้ไปที่หน้าที่ไม่มีอยู่ในแอปพลิเคชัน

มาดูกันว่าเราจะนำสิ่งนี้ไปใช้ได้อย่างไร

Step 1 - เพิ่มคอมโพเนนต์ PageNotFound เป็น NotFound.component.ts ดังที่แสดงด้านล่าง -

Step 2 - เพิ่มรหัสต่อไปนี้ในไฟล์ใหม่

import { Component } from '@angular/core';

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - เพิ่มรหัสต่อไปนี้ในไฟล์ app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

ประเด็นต่อไปนี้ต้องสังเกตเกี่ยวกับโปรแกรมข้างต้น -

ตอนนี้เรามีเส้นทางพิเศษที่เรียกว่า path: '**', component: PageNotFoundComponent ดังนั้น ** สำหรับเส้นทางใด ๆ ที่ไม่ตรงกับเส้นทางเริ่มต้น พวกเขาจะถูกนำไปยังคอมโพเนนต์ PageNotFoundComponent

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