Angular 2 - Điều hướng

Trong Angular 2, nó cũng có thể thực hiện điều hướng thủ công. Sau đây là các bước.

Step 1 - Thêm mã sau vào tệp 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']); 
   } 
}

Những điểm sau đây cần lưu ý về chương trình trên:

Khai báo thẻ html có chức năng onBack được gắn thẻ cho sự kiện nhấp chuột. Do đó, khi người dùng nhấp vào đây, họ sẽ được chuyển hướng trở lại trang Sản phẩm.
Trong chức năng onBack, sử dụng router.navigate để điều hướng đến trang được yêu cầu.

Step 2- Bây giờ, lưu tất cả mã và chạy ứng dụng bằng npm. Vào trình duyệt, bạn sẽ thấy kết quả sau.