Angular2框架入门笔记（二）：路由、服务、HTTP、表单

  接上一篇：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.name }}