Angular 4依赖注入学习教程之组件服务注入(二)


Posted in Javascript onJune 04, 2017

学习目录

  • Angular 4 依赖注入教程之一 依赖注入简介
  • Angular 4 依赖注入教程之二 组件服务注入
  • Angular 4 依赖注入教程之三 ClassProvider的使用
  • Angular 4 依赖注入教程之四 FactoryProvider的使用
  • Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象
  • Angular 4 依赖注入教程之六 Injectable 装饰器
  • Angular 4 依赖注入教程之七 ValueProvider的使用
  • Angular 4 依赖注入教程之八 InjectToken的使用

前言

之前的一篇文章已经介绍了Angular 4 依赖注入的基础知识,下面将介绍Angular 4依赖注入之组件服务注入的相关内容,分享出来供大家参考学习,下面来来看看详细的介绍:

本系列教程的开发环境及开发语言:

  • Angular 4 +
  • Angular CLI
  • TypeScript

基础知识

如何创建 Angular 组件

在 Angular 中我们通过以下方式创建一个简单的组件:

@Component({
 selector: 'app-root',
 template: `
 <h1>{{title}}</h1>
 `
})
export class AppComponent {
 title: string = 'App Works';
}

如何创建 Angular 服务

在 Angular 中我们通过以下方式创建一个简单的服务:

export class DataService {
 getData() {
 return ['Angular', 'React', 'Vue'];
 }
}

组件中注入服务

介绍完基础知识,接下来我们来创建一个新的组件 - HeroComponent,它用来显示英雄的信息,具体实现如下:

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-hero',
 template: `
 <ul>
 <li *ngFor="let hero of heros">
 ID: {{hero.id}} - Name: {{hero.name}}
 </li>
 </ul>
 `
})
export class HeroComponent implements OnInit {
 heros: Array<{ id: number; name: string }>;

 ngOnInit() {
 this.heros = [
 { id: 11, name: 'Mr. Nice' },
 { id: 12, name: 'Narco' },
 { id: 13, name: 'Bombasto' },
 { id: 14, name: 'Celeritas' },
 { id: 15, name: 'Magneta' }
 ];
 }
}

在 HeroComponent 组件中,我们在 ngOnInit 钩子中进行数据初始化,然后利用 ngFor 指令来显示英雄列表的信息。创建完 HeroComponent 组件,我们要来验证一下该组件的功能。

首先在 AppModule 中导入 HeroComponent 组件,具体如下:

import { HeroComponent } from './hero/hero.component';

@NgModule({
 declarations: [
 AppComponent,
 HeroComponent
 ],
 ...
})
export class AppModule { }

然后更新一下 AppComponent 组件,具体如下:

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 <app-hero></app-hero>
 `
})
export class AppComponent {}

如果不出意外的话,访问 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 服务,具体如下:

export class HeroService {
 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() {
 return this.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 服务

export class HeroComponent implements OnInit {
 constructor(private heroService: HeroService) { }
}

完整代码如下:

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';

@Component({
 selector: 'app-hero',
 template: `
 <ul>
 <li *ngFor="let hero of heros">
 ID: {{hero.id}} - Name: {{hero.name}}
 </li>
 </ul>
 `,
 providers: [HeroService]
})
export class HeroComponent implements OnInit {

 constructor(private heroService: HeroService) { }

 heros: Array<{ id: number; name: string }>;

 ngOnInit() {
 this.heros = this.heroService.getHeros();
 }
}

看到 providers: [HeroService] 这一行,相信有一些读者会有一些困惑,因为他们可能是按照下面的方式去配置 HeroService 服务。

@NgModule({
 declarations: [
 AppComponent,
 HeroComponent
 ],
 ...
 providers: [HeroService],
 bootstrap: [AppComponent]
})
export class AppModule { }

当然两种方式不会影响,我们最终要实现的功能,但这两种方式肯定是有区别的,希望有兴趣的读者,去思考一下哈。在多数场景下,推荐在 NgModule 的 Metadata 信息中配置相应的服务。

我有话说

为什么配置完 HeroService ,在 HeroComponent 组件类的构造函数中还得进行类型声明?

import { HeroService } from '../hero.service';

export class HeroComponent implements OnInit {
 constructor(private heroService: HeroService) { }
}

其实在 @NgModule({...}) @Component({...}) Metadata 中我们只是配置 Provider 的相关信息,即告诉 Angular DI (依赖注入) 系统,如何创建根据配置的 provider 信息,创建相应的依赖对象。而在 HeroComponent 组件类中,我们通过构造注入的方式去告诉 Angular DI 系统,我们需要的依赖对象类型。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
js实现点击生成随机div
Jan 16 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 #Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 #Javascript
angularJs中datatable实现代码
Jun 03 #Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 #Javascript
利用vueJs实现图片轮播实例代码
Jun 03 #Javascript
You might like
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php for 循环使用的简单实例
2016/06/02 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
Python发送email的3种方法
2015/04/28 Python
使用python生成目录树
2018/03/29 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
质检部部长职责
2013/12/16 职场文书
项目施工员岗位职责
2014/03/09 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
投资建议书模板
2014/05/12 职场文书
爱护花草树木的标语
2014/06/11 职场文书
个人委托书
2014/07/31 职场文书
白酒代理协议书范本
2014/10/26 职场文书
国际贸易实训报告
2014/11/05 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android