Angular4学习笔记router的简单使用

router，也就是路由，是前端中一个比较重要的概念。通过router把特定的地址和对应的页面关联后分离出来，以达到解耦的目的。在src/app目录下新建一个detail的文件夹，建立一个名为gundam-detail.component的文件。

import { Component } from '@angular/core';
import { Gundam } from '../../model/gundam';
@Component({
  template: `
    <div *ngIf="selectedGundam">
    <span>{{selectedGundam.name}}</span>
    <span>{{selectedGundam.type}}</span>
    </div>
  `
})
export class GundamDetailComponent {
    selectedGundam: Gundam;
}

ps：有关命名，基本上是采用xxx+“-”+“业务类型”+“组件类型”的命名方式，至少官方文档上是这么推荐的。当然给组件起名叫猪头三也可以，但是标准的命名可以增加组件的可读性。即便是不介意随意起名坑后来的维护者，谁也不能确定很长时间以后自己不会再对同一段代码进行重构。所以，做人还是要厚道。不写注释也就算了，起名还是规范一点好。

ps2：有关分包的方式，有的人喜欢把view放一起、controller放一起，再根据逻辑进一步细分；也有人是倒过来，先分逻辑再分view和controller。这个好像没有什么统一的定论，我个人是喜欢后一种，所以本项目采用后一种分法。

目前文件里没什么东西，只是简单的把app.component.ts里的temple给搬过来而已。

先明确需求，再开始写router。

需求：点击gundam列表页面中的任意item，可以跳转到该gundam的详情页。

作为angular的组件，希望在页面中使用router，必须先在app.module.ts里声明。

ps：之前的业务和app.module.ts没什么关系，但这并不是说它不重要。app.module.ts相当于android的mainifist文件，对整个项目进行统筹管理。

打开app.module.ts：

1. imports：在组件页面里用到基础类。
2. declarations：现有custom组件声明。
3. bootstrap：可以理解为Android的main launch，项目启动时从那个组件进入。

需要使用router前先引入：

import { RouterModule }  from '@angular/router';

因为要调用RouterModule的forRoot方法，RouterModule.forRoot 又是项目中用到的基础类，所以需要写在imports里。

 imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot()
 ],

RouterModule.forRoot 接受两个参数，第一个是route数组来表明跳转，第二个参数常年忽略，我也不知道有什么用。