angular依赖注入(1)——从父元素到子元素的数据注入
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)——从父元素到子元素的数据注入的更多相关文章
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- HTML 父元素与子元素之间的margin-top问题
问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...
- 父元素与子元素之间的margin-top问题(css hack)(转载)
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- jquery查找父元素、子元素(个人经验总结)
使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
随机推荐
- SPOJ694 New Distinct Substrings
New Distinct Substrings 题目大意 给定一个字符串,求本质不同的子串个数 题解 SA常见思想:每一个子串都是某个后缀的前缀 考虑每一个后缀的贡献,首先他拥有n - sa[i]个( ...
- thinkphp 快捷查询
快捷查询方式是一种多字段查询的简化写法,可以进一步简化查询条件的写法,在多个字段之间用|分割表示OR查询,用&分割表示AND查询,可以实现下面的查询,例如: 大理石平台价格 一.不同字段相同的 ...
- 深入浅出 Java Concurrency (38): 并发总结 part 2 常见的并发场景[转]
常见的并发场景 线程池 并发最常见用于线程池,显然使用线程池可以有效的提高吞吐量. 最常见.比较复杂一个场景是Web容器的线程池.Web容器使用线程池同步或者异步处理HTTP请求,同时这也可以有效的复 ...
- Java-Shiro:Shiro
ylbtech-Java-Shiro:Shiro 1.返回顶部 1. Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API, ...
- 使用python和tableau对数据进行抓取及可视化
使用python和tableau对数据进行抓取及可视化 本篇文章介绍使用python抓取贷款及理财平台的数据,并将数据拼接和汇总.最终通过tableau进行可视化.与之前的python爬虫文章 不同之 ...
- PAT甲级——A1095 Cars on Campus
Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...
- C# GDI+编程(二)
常用的绘图函数 DrawArc绘制一个弧形 示例:graphics.DrawArc(pen,,,,,,) 倒数第二个参数,表示起始度数,最后一个参数是弧形的跨越度数.比如起始度数是90,跨越度数是12 ...
- Nodejs之路(一)—— Nodejs入门
不知不觉,现在已经习惯学一点东西,就写博客记录一下.这次学习Nodejs主要是在B站上看的视频教程,感觉讲的很是不错,所以我想把在看视频学习过程中的一些重要知识点记录下来方便以后自己快速查阅. --- ...
- Activiti历史查看
流程执行完毕后,究竟去了哪里有些疑问. 虽然已完成的任务在act_ru_task和act_ru_execution表中都已被删除,但是这些数据还存在activiti的数据库中,作为历史改由Histor ...
- pandas一些基本操作(DataFram和Series)_1
##生成一个一维数组import numpy as np;nb7 = np.arange(0,100,2);print(nb7)print("======================== ...