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

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

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

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

1. XX-detail 2. XX-list 3. XX.service 4. XX 5. XX-rounting.module 6. XX.module

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

1. XX （实体类）

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

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

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

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

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

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

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

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

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

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

替换内容：

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

尤其要注意的是 user-rounting.module中，因为我这边模块名用了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.module.ts中把user模块的名称加进去。

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

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

运行，成功：

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

案例下载地址 https://angular.cn/guide/router

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

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

猜你喜欢