Angular记录(7)
Angular记录(7)
文档资料
- 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- 箭头函数--ES6文档:http://es6.ruanyifeng.com/#docs/function#箭头函数
- Promise 对象--JS教程:https://wangdoc.com/javascript/async/promise.html
- Promise--ES6文档:http://es6.ruanyifeng.com/#docs/promise
- Promise--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
- Promise.prototype.then()--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
- 教程:英雄指南:https://angular.cn/tutorial#tutorial-tour-of-heroes
- 工作区与项目文件的结构:https://angular.cn/guide/file-structure
- 组件简介:https://angular.cn/guide/architecture-components
- CLI 命令参考手册:https://angular.cn/cli
服务
服务:https://www.angular.cn/tutorial/toh-pt4#services
英雄指南的 HeroesComponent 目前获取和显示的都是模拟数据。
本节课的重构完成之后,HeroesComponent 变得更精简,并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。
为什么需要服务

创建 HeroService

@Injectable() 服务

获取英雄数据


提供(provide) HeroService

修改 HeroesComponent

注入 HeroService

添加 getHeroes()


在 ngOnInit 中调用它



可观察(Observable)的数据

可观察对象版本的 HeroService

在 HeroesComponent 中订阅

显示消息

创建 MessagesComponent

创建 MessageService

把它注入到 HeroService 中

从 HeroService 中发送一条消息


从 HeroService 中显示消息

绑定到 MessageService


查看最终代码




浙公网安备 33010602011771号