Angular 2 - การนำทาง

ใน Angular 2 ยังสามารถใช้การนำทางด้วยตนเองได้อีกด้วย ต่อไปนี้เป็นขั้นตอน

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

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

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

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

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

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