接上一篇:Angular2框架入门笔记(一):概念、搭建环境、模板语法、组件
这篇学习笔记主要整理记录Angular的路由、服务、HTTP与表单的功能。路由可以实现不同页面和结构之间导航跳转的功能,服务与HTTP可以对数据进行管理,表单是应用处理用户输入最常用的结构。
五、导航页面:路由
5.1 在AppModule中
5.1.1 注册路由
(1)在app.module.ts中的imports里添加商品详情路由,path是匹配浏览器地址栏中的URL字符,component是导航到此路由是创建哪个组件。路由会将一个或多个URL路径与一个组件相关联。
RouterModule.forRoot([
{
path: '', component: ProductListComponent },
{
path: 'products/:productId', component: ProductDetailsComponent },
])
(2)使用RouterLink指令定义链接,它定义了如何像在组件模板中声明的那样导航到指定路由。
修改HTML中的*ngFor指令(后半句),在遍历列表的过程中把 products 数组中的每个索引赋值给 productId 变量。
<div *ngFor="let product of products; index as productId">
(3)修改商品名称的链接,使其包含 routerLink。
<a [title]="product.name + ' details'" [routerLink]="['/products', productId]">{
{
product.name }}</a>
5.1.2 使用路由信息
(1)导入需要用到的外部信息(例子为products数组);导入ActivatedRoute(包含与当前组件相关的路由信息)。
import {
products } from '../products';
import {
ActivatedRoute } from '@angular/router';
(2)定义product属性并把ActivatedRoute注入构造函数中。
export class ProductDetailsComponent implements OnInit {
product;
constructor( private route: ActivatedRoute,) {
};
(3)在 ngOnInit( )方法中,根据productId获取路由参数以及商品信息。
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.product = products[+params.get('productId')];
});
(4)显示效果
<div *ngIf="product">
<h3>{
{
product.n