[Angular] Providers and useFactory
// service.ts import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http'; import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'; @Injectable()
export class FoodService {
constructor(
private http: Http,
private api: string
) {
console.log(this.api);
}
getFood(): Observable<any[]> {
return this.http.get(this.api)
.map(response => response.json());
}
}
Using factory provider:
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { FoodService } from '../food.service'; interface Drink {
name: string,
price: number
} export function DrinkFactory(http) {
return new FoodService(http, '/api/drinks');
} @Component({
selector: 'drink-viewer',
providers: [
{
provide: FoodService,
useFactory: DrinkFactory,
deps: [
Http
]
}
],
template: `
<div>
<div *ngFor="let item of items$ | async">
{{ item.name }} {{ item.price | currency:'USD':true }}
</div>
</div>
`
})
export class DrinkViewerComponent implements OnInit {
items$: Observable<Drink[]>;
constructor(private foodService: FoodService) {}
ngOnInit() {
this.items$ = this.foodService.getFood();
}
}
Here we create 'DrinkFactory' as a named funciton, this is good for AOT, so recommended doing this way.
[Angular] Providers and useFactory的更多相关文章
- 来自 Thoughtram 的 Angular 2 系列资料
Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...
- [Angular 2] Value Providers & @Inject
Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really ...
- [Angular 2] Inject Service with "Providers"
In this lesson, we’re going to take a look at how add a class to the providers property of a compone ...
- Angular之Providers (Value, Factory, Service and Constant )
官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...
- 在Angular中定义共享的Providers
转自:https://segmentfault.com/a/1190000010700308 有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可 ...
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
Artical --> BYPASSING PROVIDERS IN ANGULAR 2 Here trying to solve one problem: On the left hand s ...
- [Angular] Pipes as providers
In this example, we are going to see how to use Pipe as providers inject into component. We have the ...
- Angular:ViewProviders和Providers的区别
在Angular中使用依赖注入(DI)的时候,我们一般会使用providers.其实要做同样的事我们还有另外一个选择:viewProviders. viewProviders允许我们定义只对组件的vi ...
- [Angular] Difference between Providers and ViewProviders
For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...
随机推荐
- jquery表格简单插件
1.一直对jquery插件感觉非常神奇.今天动手写了一个超级简单的案例. 2.效果 3.体会 a.jquery插件编写能力. 须要具备一定js能力的编写.还有写css样式的运用:希望以后这方面会有提高 ...
- [51Nod]NOIP2018提高组省一冲奖班模测训练(一)题解
http://www.51nod.com/contest/problemList.html#!contestId=72&randomCode=147206 原题水题大赛.. A.珂朵莉的旅行 ...
- 26.多线程join detach
#include <iostream> #include <thread> #include <array> #include <Windows.h> ...
- 69.fprintf fscanf
fprintf //从读文件中提取字符串到info1.user和info1.password中 fscanf(pfr, "%s%s", info1.user, info1.pass ...
- Filebeat之input和output(包含Elasticsearch Output 、Logstash Output、 Redis Output、 File Output和 Console Output)
前提博客 https://i.cnblogs.com/posts?categoryid=972313 Filebeat啊,根据input来监控数据,根据output来使用数据!!! Filebeat的 ...
- 企业部署Linux应用将拥有更低的TCO
650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...
- 仙人掌的同构(hash)
关于仙人掌的同构,主要是我太蒟蒻了QAQ,问了好几位大佬才弄好. 手撕仙人掌,你得先有手套 ,你得先了解以下基本知识 a.点双连通分量,没什么好说得,仙人掌上有环,判环用点双 b.树的hash点这里 ...
- Maven搭建hadoop环境报Missing artifact jdk.tools:jdk.tools:jar:1.7
今天,更新了工程,报错了. 项目中用了HBase,也有Hadoop相关的jar配置. pom文件, Missing artifact jdk.tools:jdk.tools:jar:1.7 Maven ...
- BZOJ 1007 HNOI 2008 水平可见直线 计算几何+栈
题目大意:给出一些笛卡尔系中的一些直线,问从(0,+∞)向下看时能看到哪些直线. 思路:半平面交可做,可是显然用不上. 类似于求凸包的思想,维护一个栈. 先将全部直线依照k值排序.然后挨个压进去,遇到 ...
- drawable-图片绘制
首先看一下,下端代码 private Bitmap createSelectedChip(RecipientEntry contact, TextPaint paint) { int height = ...