1.什么是依赖注入?

依赖注入是一种编程模式,可以让类从外部源中获得它的依赖,不必亲自创建他们。

(这就达到了一个效果,我不知道我是怎么实现的,但我创建了一个实现他的接口,然后接口封装起来,1.可以分离关注。2.可以简化思路 3.可以语义更接近实际);

2.为什么需要依赖注入?

为了方便测试,分离关注的原则。

服务是个分离关注点,不同等级和类型的服务放在它自己的文件里。

3.实现的步骤?

1.配置注入器;

不需要创建Angular注入器。angular在启动过程中会自动创建一个应用级的注入器(就只最大的注入器)。

在main.ts里

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule是最大的注入器,其他的注入在AppModule里先。

2.AppModule里注册提供商,也可以在组件中注册提供商;

@NgModule和@Component里存在着providers属性;通过它来注入一些提供商。选择哪一种取决于提供商的服务是给多大的范围内的组件使用;

3.在子元素的组件里边调用注入器提供的方法。

 import { Component }   from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
selector: 'hero-list',
template: `
<div *ngFor="let hero of heroes">
{{hero.id}} - {{hero.name}}
</div>
`
})
export class HeroListComponent {
heroes: Hero[];
constructor(heroService: HeroService) { //注意这里的引入方式和下一行的调用方式
this.heroes = heroService.getHeroes();
}
}

  备注:这段代码就会实现一个服务,这个服务的功能可以通过调用HeroService的getHeroes方法获得HEROES;虽然看起来并没有什么意义,但是还是会在语义上强大起来,而且想象以下代码量非常大的时候。服务只是一个类,在没有@injectable()之前它并没有任何特别之处。

angular依赖注入(1)——从父元素到子元素的数据注入的更多相关文章

  1. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  2. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  3. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  4. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  5. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  6. HTML 父元素与子元素之间的margin-top问题

    问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...

  7. 父元素与子元素之间的margin-top问题(css hack)(转载)

    情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...

  8. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  9. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

  10. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

随机推荐

  1. 180608发现的一个有趣的Douyin-Bot项目

    今日发现的github 项目 Douyin-Bot 抖音机器人发现漂亮小姐姐 :sweat_smile: 在开发者模式下,找到指针位置,开启之后,当点击屏幕时,可以获取点击屏幕处的xy坐标了 我使用的 ...

  2. AM运行中的垃圾数据清理

    1.下载 filetmpclear.bat 2.打开 这个批处理文件,修改参数 3.按下图 第一个红色框内, 地址: 可以在  AM8服务管理器- 文件服务 ,数据路径后再加  \__Temp__ 第 ...

  3. apache日志配置一例,包括指定存储目录与格式、自动删除过期的日志文件

    有需要的朋友可以参考下(http://www.nanke0834.com) 1.vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 添加或修改为:复 ...

  4. jquery ajax 放在重复点击事件beforeSend方法

    防止重复数据在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数 ...

  5. EF实体模型的更新

    摘要 解决前期数据库优先添加的实体,然后数据库表结构发生变化后,导致代码操作EF插入更新数据失败问题 EF 数据库更新模型 相比大家在使用实体操作数据库的时候,都是采取数据库优先,手动添加实体模型.但 ...

  6. Consul 安装的与启动

    1.下载地址:https://www.consul.io/downloads.html linux 下载地址: wget https://releases.hashicorp.com/consul/0 ...

  7. python基础-基础知识考试_day5 (包括:函数_递归等知识)

    老男孩 Python 基础知识练习(三) 1.列举布尔值为 False 的值空,None,0, False, '', [], {}, () 2.写函数:根据范围获取其中 3 和 7 整除的所有数的和, ...

  8. codeforces 1186E- Vus the Cossack and a Field

    传送门:QAQQAQ 题意:给一个01矩阵A,他的相反矩阵为B,每一次变换都会将原矩阵面积乘4成为: AB BA 矩阵的左上角固定,变换无限次,现有q个询问,即求一个矩阵内的1的个数. 思路:因为反转 ...

  9. Spring MVC(十三)--保存并获取属性参数

    这里的属性参数主要是指通过request.session.cookie等设置的属性,有时候我们需要将一些请求的参数保存到HTTP的request或者session对象中去,在控制器中也会进行设置和获取 ...

  10. PAT甲级——A1090 Highest Price in Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...