07_angular 4 服务跟依赖注入.docxVIP

服务与依赖注入随着《英雄指南》的成长，我们要添加更多需要访问英雄数据的组件。为了不再把相同的代码复制一遍又一遍，我们要创建一个单一的可复用的数据服务，并且把它注入到需要它的那些组件中。 使用单独的服务可以保持组件精简，使其集中精力为视图提供支持，并且，借助模拟（Mock）服务，可以更容易的对组件进行单元测试。由于数据服务总是异步的，因此我们最终会提供一个基于承诺（Promise）的数据服务。Angular中提供了 HYPERLINK /link?url=PAaQ8sWsQEs2oxL67_pkwPyvpGotJYLSi93ob3bHJPHz0wprkfKFYQdLNBfiv6hDahe64_F54PPcv6lwXofZNbxh2XKuhQB5SJH6axWYlk94imxC1g2U_fjwmDGjZBVnjAXLyVRtYJksWpdqOtzuPK9Y4Sh5VqQ-IjZxsJzEJrkI2gNMK2Gx9Tu3gucAJEJf \t _blank 依赖注入的概念，使得我们可以很优雅的做到这一点。简言之，依赖注入可以使我们在编写代码的时候不用使用new 去生成一个类，这样就达到了解耦的目的，Angular本身就是一个依赖注入（IOC）框架，本章中我们还是先随着官方文档完成任务，然后详细的讲一下依赖注入在Angular中的实现。创建英雄服务客户向我们描绘了本应用更大的目标：想要在不同的页面中用多种方式显示英雄。 现在我们已经能从列表中选择一个英雄了，但这还不够。 很快，我们将添加一个仪表盘来显示表现最好的英雄，并创建一个独立视图来编辑英雄的详情。 所有这些视图都需要英雄数据。目前，AppComponent显示的是模拟数据。 不过，定义这些英雄并非组件的任务，否则我们没法与其它组件和视图共享这些英雄列表数据。 在这一章，我们将把获取英雄数据的任务重构为一个单独的服务，它将提供英雄数据，并把服务在所有需要英雄数据的组件间共享。创建 HeroService，在Terminal选项卡中使用ng g service hero命令来创建HeroService服务我们看到命令行工具自动为我们创建了hero.service.ts文件，该文件中定义了HeroService服务类，图中警告在提示我们虽然生成了服务类，但并没有在应用中提供，使用时必须在提供器中注册该服务才可以使用。我们发现在默认生成的代码中，HeroService服务类使用了一个@Injectable装饰器，被这个装饰器修饰的类允许在该服务的构造函数中使用依赖注入其他的依赖，export导出他，以供别人使用。虽然此时HeroService还没有任何依赖，但我们还是得加上这个装饰器。 作为一项最佳实践，无论是出于提高统一性还是减少变更的目的， 都应该从一开始就加上@Injectable()装饰器。移动模拟的英雄数据，我们在app文件夹下创建一个名为mock-heroes.ts的文件，将原来写在ponent.ts文件中的HEROES数组剪切过来，并添加Hero的引用。我们导出了HEROES常量，以便可以在其它地方导入它 — 例如HeroService服务。修改ponent.ts文件，修改heroes属性为空数组。在HeroService服务中定义一个方法getHeroes，获取并返回模拟的英雄数据这样HeroService服务就定义好了，我们可以在多个组件中使用HeroService服务了。在AppComponent组件中使用HeroService服务该如何在运行中获得一个具体的HeroService实例呢？你可能想用new来创建HeroService的实例，就像这样：src/app/ponent.tsheroService = new HeroService(); // dont do this但这不是个好主意，有很多理由，例如：我们的组件得弄清楚该如何创建HeroService。 如果有一天我们修改了HeroService的构造函数，我们不得不找出创建过此服务的每一处代码，并修改它。 围着补丁代码转圈很容易导致错误，还会增加测试负担。我们每次使用new都会创建一个新的服务实例。 如果这个服务需要缓存英雄列表，并把这个缓存共享给别人呢？怎么办？ 没办法，做不到。我们把AppComponent锁定到HeroService的一个特定实现。 我们很难在不同的场景中切换实现。 例如，能离线操作吗？能在测试时使用不同的模拟版本吗？这可不容易。在Angular中使用一种叫做依赖注入的机制可以非常优雅的实现服务对象的创建工作。要使用HeroService服务，我们需要在组件或者根模块的服务提供器中注册该服务，才可以在应用中使用该服务，其中在组件中注册可以在该组件以及该组件的子组件中使用该服务，而在