angular项目仿照案例代码新增一个模块

今天准备仿照官网案例中的模块，然后自己增加一个模块。

参照对象是项目中的heros模块，右下图是中的目录结构：

从代码结构看，官方实例中一个基本模块包含如下内容：

1. XX- 2. XX-list 3. XX. 4. XX 5. XX-. 6. XX.

按先后顺序排序之后如下：

1. XX （实体类）

2. XX. (提供本模块中具体的一些功能和方法)

3. XX-和XX-list （记录详情和记录列表）

各自又分为.ts + .html ,以及.css

.ts负责数据获取以及页面跳转的定义，.html负责数据的展示，总得来说是一对一的配对关系。

4. XX-. (定义本模块中的几个路由)

5. XX. （整合本模块的路由与所有功能组件）

************************************************************************************************************

说完了一个模块的组成部分，准备增加自定义的用户信息模块（user），下面记录添加自定义模块的步骤：

1. 复制“heros”文件夹，并重命名为user（按它的标准应该是users，不过出于个人喜好，我还是用了单数user）。

2. 对于上面介绍的每个部分，文件名中heros替换为user， 文件里面的内容也进行替换：

替换内容：HERO -> USER
Hero -> User
hero -> user
heroes -> users //注意复数的写法问题

尤其要注意的是 user-.中，因为我这边模块名用了user而不是users，踩了一个小时的坑之后，路由中的写法如下（如果是按照示例用复数起名为users的话就没有这个问题）：

const userRoutes: Routes = [{ path: 'users', redirectTo: '/superusers' },{ path: 'user/:id', redirectTo: '/superuser/:id' },{ path: 'superusers',  component: UserListComponent, data: {  }},{ path: 'superuser/:id', component: UserDetailComponent, data: {  }}
];

3. app..ts中把user模块的名称加进去。

4. .html中把user模块的链接放进去，按照 user-.，注意路径的写法。

4. mock-users.ts中的模拟数据改一下。

运行，成功：

注意：如果功能代码有误，或浏览器的控制台都会有相应的提示。但是如果路由的写法不对，那么提示就很少，排查比较困难，所以路由的写法一定要重视。

案例下载地址