1. WIKI教程
2. 学习Angular2
3. angular2 - 导航( Navigation)

angular2 - 导航( Navigation)

在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标记，其中有一个标记为click事件的onBack函数。 因此，当用户单击此按钮时，它们将被定向回“产品”页面。

• 在onBack功能中，使用router.navigate导航到所需的页面。

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

Step 3 - 单击“清单”链接。

Step 4 - 单击“返回产品”链接，您将看到以下输出，它将带您返回“产品”页面。