建议你看一下前面的内容:第三节
接着上一节的问题来讲,怎么做的数据和我们的模板组件分离呢?
这个时候我们需要用到Angular2给我们提供的服务功能:Services
1.创建英雄服务 HeroServices
在app文件夹下面创建一个文件 hero.service.ts
提示: 服务文件名已 .service 结尾
2.打开并编辑该文件,如下图1:
我们注入了 Angular 的 Injectable 方法
并且用 @Injectable() 来应用该方法
一定不要忘记了后面的() , 否则会出bug的
2.添加一个 getHeros方法,图2
使用该服务(HeroService)的东东,并不知道该服务是怎么获取数据的,
我们的HeroService可以从任何地方获取hero数据,
比如说从webServices上 , 本地存储(localStorage)上 , 或则造一个假数据 等等等等....
3.接下来我们创造一系列的英雄数据: heros
从app.component.ts 中 把 HEROS 数据剪切下来
粘贴到一个新的文件 mock-heros.ts 文件中并导出(该文件也在app文件夹之下)
顺便导入我们之前创建好的英雄模板 代码如 图3
4.现在能看到,在我们的app.component.ts文件中已经不再认识HEROS这个类了,
接下来让我们回到hero.service.ts文件中编写代码: 图4
服务做好之后,就可以在我们想用的地方来用这个服务了
5.首先来到app.component.ts 中 , 使用一下这个服务(HeroServices)
a.导入你想用的动西 图5
b.服务导入进来之后,怎么样吧服务中的数据实例化出来呢?
heroService=newHeroService(); 难道我们要这样用new 关键字来实例化服务中的数据吗,不,我们不会这样写的,官网上已经很明确到告诉我们原因了 图6
那我们应该怎么样把服务中的数据获取到呢?
c. 获取服务中的数据
我们通过构造函数(constructor) 来从服务(HeroService) 中构造我们的数据 图7
constructor 是每个组件都有的构造函数,当组件在构造的时候就会执行这个构造函数,
接下来再写一个方法,来接受这个构造函数中的私有变量 heroService 图8
只要这个方法执行了,我们就会将服务中的数据通过私有变量heroService赋值到属性this.heroes中,
但是,应该在什么时候调用这个方法呢?
在Angular2中,每个组件都拥有自己的声明周期,比如,组件加载... , 组件渲染.... , 组价销毁...扥等等等,
想了解更多的Angular组件声明周期问题,可以点击这里
在app.component.ts 文件中注入 OnInit 这个模块(组件被初始化时触发的方法) ,
并实现该组件初始化方法 图9 图10
当然这样做是不够的,还需要在app.module.ts文件的 providere 数据中,将 heroService 服务注入一下: 图11
这样的话我面就可以在初始化方法中获取到英雄数据列表了,
但是还有一个问题,假设我们的英雄数据不是写死的假数据,而是从网上获取的呢?
这避让造成我们要登上一段时间,而这段时间就是获取数据所浪费掉的
我们能不能异步获取数据呢,当然可以,怎么异步获取我们的数据呢?
请看下集: Angular2 五:异步获取数据