总的来说，写到这里业务逻辑已经完成了一半，甚至更多。因为本身项目就是一个点击查看的单页面应用，并不太复杂。但是所有的代码都挤在一个类里，可读性和扩展性都会变的很差。
所以是时候开始下一步了。
分包的精髓：拆。
import { Component } from '@angular/core'; class Gundam { name: string; type: string; } const GUNDAMS: Gundam[] = [ {name: '海牛高达', type: 'NewType'}, {name: '巴巴托斯', type: '近战'}, {name: '力天使', type: '射击'} ]; @Component({ selector: 'my-app', template: ` <h1>Hello,World</h1> <p>你好,gundam meister</p> <div *ngFor="let gundam of gundams" (click)="onSelected(gundam)"> <span> {{gundam.name}} </span> </div> <div *ngIf="selectedGundam"> <span>{{selectedGundam.name}}</span> <span>{{selectedGundam.type}}</span> </div> ` }) export class AppComponent { gundam: Gundam = { name: '海牛', type: 'NewType' }; gundams = GUNDAMS; selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量 onSelected (gundam: Gundam): void { this.selectedGundam = gundam; // 通过参数赋值 } }
现在一个component挤了太多的东西，有数据、有常量、有template和class。如果项目很小的话(比如这个demo)还可以接受，但是一旦业务逻辑繁琐起来就是totally disaster。
就算不介意坑别人，也别给隔了很久再去维护的自己找麻烦。
先把gundam这个class给摘出来，既然是model就好好呆在model的地方。
在src下新建model的包，新建一个gundam.ts的文件，把gundam class给ctrl+x过去。
在原本的地方导入：
import { Gundam } from '../../model/gundam';
再把数组常量给挪走，理论上数据是需要从服务端取，但是我不写服务端好多年，所以还是继续使用假数据。
在src新建包service,新建data.ts文件,导入gundam类以后导出数组：
import { Gundam } from './../model/gundam'; export const GUNDAMS: Gundam[] = [ {name: '海牛高达', type: 'NewType'}, {name: '巴巴托斯', type: '近战'}, {name: '力天使', type: '射击'} ];
在原位置引入使用：
import { GUNDAMS } from './../../service/data';
ps:不要忘记在每个文件后空一行.虽然不空可以正常运行,但是会有错误提示.总的来说就是这么一个格式要求.
此时可以正常显示，而app.component.ts里已经整洁多了。
但是还不够，现在要把详情分离出去。让上帝的归上帝，凯撒的归凯撒。主页就处理主页数据，详情就处理详情数据。
换句话说，把首页分成两个页面：首页 + 详情。
需要用到的就是route。
PS，有关绑定：
Angular的绑定很有意思，有双向的也有单向的，有在class里声明一个变量在template里使用的，也有在template里暴露一个class里的变量给外界赋值的。目前我见到的是如下三种写法（指在view里）：
1）{{变量名}}，单项绑定，class中的值会显示到view里。
2）[变量名]，单项绑定，一般后面还会跟个“=”，用来给class里的变量或者属性赋值。
3）*ngModel=[(变量名)]，双向绑定。有关双向绑定其实我还是有点不理解，官方文档上也只是在表单处理时应用。大体上说双向绑定就是绑定值后在页面修改值可以影响class内的值，而class内的值改变后view的值也会改变。