Angular 2 导航

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

步骤 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 函数中，使用 router.navigate 导航到所需的页面。

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

步骤 3 ： 点击库存链接。

步骤 4 ： 点击“返回产品”链接，你将获得以下输出，将你带回产品页面。