📌  相关文章
📜  Angular 2-导航

📅  最后修改于: 2020-10-28 05:08:43             🧑  作者: Mango

在Angular 2中，也可以执行手动导航。以下是步骤。

步骤1-将以下代码添加到Inventory.component.ts文件。

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

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   Back to Products' 
})  

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

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

关于上述程序，需要注意以下几点-

  • 声明一个html标记，该标记具有标记为click事件的onBack函数。因此，当用户单击此按钮时，他们将被定向回到“产品”页面。

  • 在onBack函数，使用router.navigate导航到所需页面。

步骤2-现在，保存所有代码并使用npm运行应用程序。转到浏览器，您将看到以下输出。

使用npm的应用程序

步骤3-单击库存链接。

库存链接

步骤4-单击“返回产品”链接，您将获得以下输出，将您带回到“产品”页面。

返回产品