关于angular:angular-增删改查流程

1、 我的项目开发过程
Eg：零碎设置 -> 居民关系治理 （system -> relationship）
（1） 初始化居民关系治理模块
创立模块
应用shell来到src\app\system文件夹，执行ng g module relationship命令。
成果：
relationship
└──relationship.module.ts

（2） 初始化居民关系治理实体、mockapi、service层
创立实体文件：web/src/entity/relationship.ts
Mockapi文件：web/src/api/relationship.api.ts并更新导入web/src/api/apis.ts文件
Service文件：web/src/service/relationship.service.ts和web/src/service/relationship.service.spec.ts

（3） 性能原型
index原型，新增原型，编辑原型

eg：编辑原型
① 生成组件
应用shell进入src/app/system文件夹，执行创立组件命令：ng g c edit。
成果：
relationship
├── edit
│ ├── edit.component.css
│ ├── edit.component.html
│ ├── edit.component.spec.ts
│ └── edit.component.ts
├── relationship.module.ts

并更新了模块文件relationship.module.ts。

② edit.component.html文件
编写页面

（4） 表单测验
add、edit表单测验
① web/src/app/system/relationship/edit/edit.component.html

② web/src/app/system/relationship/edit/edit.component.ts

③ web/src/app/system/relationship/edit/edit.component.spec.ts
import {ReactiveFormsModule} from ‘@angular/forms’;

④ web/src/app/system/relationship/relationship.module.ts
import {ReactiveFormsModule} from ‘@angular/forms’;

（5） 实现原型
index应用MockApi实现分页性能、index查问性能
新增性能
编辑性能
删除性能

2、 eg：编辑性能的数据流

提交前：
（1）web/src/app/system/relationship/edit/edit.component.ts

（2）web/src/service/relationship.service.ts

（3）web/src/api/relationship.api.ts

点击保留按钮后：
（1）web/src/app/system/relationship/edit/edit.component.ts

（2）web/src/service/relationship.service.ts

（3）web/src/api/relationship.api.ts