接着上一节的问题来讲,怎么做的数据和我们的模板组件分离呢?
这个时候我们需要用到Angular2给我们提供的服务功能:Services
1.创建英雄服务 HeroServices
在app文件夹下面创建一个文件 hero.service.ts
提示: 服务文件名已 .service 结尾
2.打开并编辑该文件,如下图1:
我们注入了 Angular 的 Injectable 方法
并且用 @Injectable() 来应用该方法
一定不要忘记了后面的() , 否则会出bug的
2.添加一个 getHeros方法,图2
使用该服务(HeroService)的东东,并不知道该服务是怎么获取数据的,
我们的HeroService可以从任何地方获取hero数据,
比如说从webServices上 , 本地存储(localStorage)上 , 或则造一个假数据 等等等等....
服务做好之后,就可以在我们想用的地方来用这个服务了
图5b.服务导入进来之后,怎么样吧服务中的数据实例化出来呢?
heroService=newHeroService(); 难道我们要这样用new 关键字来实例化服务中的数据吗,不,我们不会这样写的,官网上已经很明确到告诉我们原因了 图6
那我们应该怎么样把服务中的数据获取到呢?
c. 获取服务中的数据
我们通过构造函数(constructor) 来从服务(HeroService) 中构造我们的数据 图7
constructor 是每个组件都有的构造函数,当组件在构造的时候就会执行这个构造函数,
接下来再写一个方法,来接受这个构造函数中的私有变量 heroService 图8
只要这个方法执行了,我们就会将服务中的数据通过私有变量heroService赋值到属性this.heroes中,
图9 图10当然这样做是不够的,还需要在app.module.ts文件的 providere 数据中,将 heroService 服务注入一下: 图11
图11