Angular 4依赖注入学习教程之组件服务注入(二)
学习目录
- Angular4依赖注入教程之一依赖注入简介
- Angular4依赖注入教程之二组件服务注入
- Angular4依赖注入教程之三ClassProvider的使用
- Angular4依赖注入教程之四FactoryProvider的使用
- Angular4依赖注入教程之五FactoryProvider配置依赖对象
- Angular4依赖注入教程之六Injectable装饰器
- Angular4依赖注入教程之七ValueProvider的使用
- Angular4依赖注入教程之八InjectToken的使用
前言
之前的一篇文章已经介绍了Angular4依赖注入的基础知识,下面将介绍Angular4依赖注入之组件服务注入的相关内容,分享出来供大家参考学习,下面来来看看详细的介绍:
本系列教程的开发环境及开发语言:
- Angular4+
- AngularCLI
- TypeScript
基础知识
如何创建Angular组件
在Angular中我们通过以下方式创建一个简单的组件:
@Component({ selector:'app-root', template:`{{title}}
` }) exportclassAppComponent{ title:string='AppWorks'; }
如何创建Angular服务
在Angular中我们通过以下方式创建一个简单的服务:
exportclassDataService{ getData(){ return['Angular','React','Vue']; } }
组件中注入服务
介绍完基础知识,接下来我们来创建一个新的组件-HeroComponent,它用来显示英雄的信息,具体实现如下:
import{Component,OnInit}from'@angular/core'; @Component({ selector:'app-hero', template:`
- ID:{{hero.id}}-Name:{{hero.name}}
在HeroComponent组件中,我们在ngOnInit钩子中进行数据初始化,然后利用ngFor指令来显示英雄列表的信息。创建完HeroComponent组件,我们要来验证一下该组件的功能。
首先在AppModule中导入HeroComponent组件,具体如下:
import{HeroComponent}from'./hero/hero.component'; @NgModule({ declarations:[ AppComponent, HeroComponent ], ... }) exportclassAppModule{}
然后更新一下AppComponent组件,具体如下:
import{Component}from'@angular/core'; @Component({ selector:'app-root', template:`` }) exportclassAppComponent{}
如果不出意外的话,访问http://localhost:4200/页面,您将看到如下信息:
ID:11-Name:Mr.Nice ID:12-Name:Narco ID:13-Name:Bombasto ID:14-Name:Celeritas ID:15-Name:Magneta
难道一切就这么结束了,No!No!别忘记了我们这节课的主题是介绍如何在组件中注入服务。在目前的HeroComponent组件,我们的英雄列表信息是固定的,在实际的开发场景中,一般需要从远程服务器获取相应的信息。但我们暂不考虑这个问题,假设另外一个组件也需要利用同样的英雄列表信息,那我们要怎么办,难道直接上"终极绝招"-Copy&&Paste。当然这是"终极绝招",岂能随便使用(不怕被群殴的话,请自便哈)。
针对上面提到的问题,理想的方式是创建一个HeroService服务,从而实现数据共享。
说干就干,我们马上来创建HeroService服务,具体如下:
exportclassHeroService{ heros:Array<{id:number;name:string}>=[ {id:11,name:'Mr.Nice'}, {id:12,name:'Narco'}, {id:13,name:'Bombasto'}, {id:14,name:'Celeritas'}, {id:15,name:'Magneta'} ]; getHeros(){ returnthis.heros; } }
在HeroService服务中,我们定义了一个heros属性和一个getHeros()方法:
- heros-用于保存英雄的列表信息
- getHeros()-用于获取英雄的列表信息
创建完HeroService服务后,接下来我们来介绍如何在组件中使用HeroService服务。
组件中使用HeroService
组件中使用HeroService服务,主要分为三个步骤:
1、导入HeroService服务
import{HeroService}from'../hero.service';
2、声明HeroService服务
@Component({ selector:'app-hero', ... providers:[HeroService] })
注入HeroService服务
exportclassHeroComponentimplementsOnInit{ constructor(privateheroService:HeroService){} }
完整代码如下:
import{Component,OnInit}from'@angular/core'; import{HeroService}from'../hero.service'; @Component({ selector:'app-hero', template:`
- ID:{{hero.id}}-Name:{{hero.name}}
看到providers:[HeroService]这一行,相信有一些读者会有一些困惑,因为他们可能是按照下面的方式去配置HeroService服务。
@NgModule({ declarations:[ AppComponent, HeroComponent ], ... providers:[HeroService], bootstrap:[AppComponent] }) exportclassAppModule{}
当然两种方式不会影响,我们最终要实现的功能,但这两种方式肯定是有区别的,希望有兴趣的读者,去思考一下哈。在多数场景下,推荐在NgModule的Metadata信息中配置相应的服务。
我有话说
为什么配置完HeroService,在HeroComponent组件类的构造函数中还得进行类型声明?
import{HeroService}from'../hero.service'; exportclassHeroComponentimplementsOnInit{ constructor(privateheroService:HeroService){} }
其实在@NgModule({...})或@Component({...})Metadata中我们只是配置Provider的相关信息,即告诉AngularDI(依赖注入)系统,如何创建根据配置的provider信息,创建相应的依赖对象。而在HeroComponent组件类中,我们通过构造注入的方式去告诉AngularDI系统,我们需要的依赖对象类型。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。