![Angular 2 Tutorial](/angular2/images/angular2-mini-logo.jpg)
- Angular 2 教程
- Angular 2 - 主页
- Angular 2 - 概览
- Angular 2 - 环境
- Angular 2 - Hello World
- Angular 2 - 模块
- Angular 2 - 架构
- Angular 2 - 组件
- Angular 2 - 模板
- Angular 2 - 指令
- Angular 2 - 元数据
- Angular 2 - 数据绑定
- 使用 HTTP 的 CRUD 操作
- Angular 2 - 错误处理
- Angular 2 - 路由
- Angular 2 - 导航
- Angular 2 - 表单
- Angular 2 - CLI
- Angular 2 - 依赖注入
- Angular 2 - 高级配置
- Angular 2 - 第三方控件
- Angular 2 - 数据显示
- Angular 2 - 处理事件
- Angular 2 - 转换数据
- Angular 2 - 自定义管道
- Angular 2 - 用户输入
- Angular 2 - 生命周期钩子
- Angular 2 - 嵌套容器
- Angular 2 - 服务
- Angular 2 实用资源
- Angular 2 - 常见问题解答
- Angular 2 - 快速指南
- Angular 2 - 实用资源
- Angular 2 - 讨论
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 函数标记到 click 事件。因此,当用户单击此标记时,他们将被导回到 Products 页面。
在 onBack 函数中,使用 router.navigate 导航到所需页面。
步骤 2 − 现在,保存所有代码并使用 npm 运行应用程序。转到浏览器,你将看到以下输出。
![Application Using npm](/angular2/images/application_using_npm.jpg)
步骤 3 − 单击 Inventory 链接。
![Inventory Link](/angular2/images/inventory_link.jpg)
步骤 4 − 单击“返回产品”链接,你将获得以下输出,该输出将你带回到 Products 页面。
![Back to Products](/angular2/images/back_to_products.jpg)
***广告***