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

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

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

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

@H_301_0@

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

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

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

@H_301_0@打开app.module.ts：

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

@H_301_0@需要使用router前先引入：

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

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

@H_301_0@route类包括2个比较关键的属性：path和component，通过访问path，可以找到唯一的component。

@H_301_0@在forRoot里添加上包含主页和详情页2个component的route数组。

@H_301_0@app.module.ts现在看起来是这样的：

@H_301_0@2个path都还空着，因为还少一个关键的东西，就算写上也会报错：

@H_301_0@Error: Cannot find primary outlet to load ‘AppComponent'

@H_301_0@在angular里，router是要搭配标签router-outlet来使用的，换句话说router决定显示哪个组件，而由router-outlet决定显示在哪里。

@H_301_0@在app.component.ts里的template加上标签

@H_301_0@然后不出意外的显示了2个主页:

@H_301_0@app.component.ts是一个组件也是一个页面，angular先从bootstrap里进入了app.component.ts渲染了界面（也就是router-outlet上面的部分）。碰到又去找router，发现对应的router也有组件，于是又加载了一遍。

@H_301_0@所以为了正常显示，也要把主页也单独抽出来。所有组件通过app.component.ts里的来进行加载。而app.component.ts作为整个demo的最外层容器可以进行一些公共的操作（典型：后退动作）。

@H_301_0@在src下新建host包，新建gundam-host.component.ts文件。 基本上可以把整个app挪过来，删除掉out标签，删掉selector(暂时用不到)。

` }) export class GundamHostComponent { gundam: Gundam = { name: '海牛',type: 'NewType' }; gundams = GUNDAMS; selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量 onSelected (gundam: Gundam): void { this.selectedGundam = gundam; // 通过参数赋值 } }