// 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的更多相关文章

  1. 来自 Thoughtram 的 Angular 2 系列资料

    Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...

  2. [Angular 2] Value Providers & @Inject

    Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really ...

  3. [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 ...

  4. Angular之Providers (Value, Factory, Service and Constant )

    官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...

  5. 在Angular中定义共享的Providers

    转自:https://segmentfault.com/a/1190000010700308 有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可 ...

  6. [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2

    Artical --> BYPASSING PROVIDERS IN ANGULAR 2 Here trying to solve one problem: On the left hand s ...

  7. [Angular] Pipes as providers

    In this example, we are going to see how to use Pipe as providers inject into component. We have the ...

  8. Angular:ViewProviders和Providers的区别

    在Angular中使用依赖注入(DI)的时候,我们一般会使用providers.其实要做同样的事我们还有另外一个选择:viewProviders. viewProviders允许我们定义只对组件的vi ...

  9. [Angular] Difference between Providers and ViewProviders

    For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...

随机推荐

  1. .Net中的缓存依赖配置

    缓存--能非常好的提高网站的性能. 在訪问量大,但更新较少的站点中使用缓存,能够大大提高执行效率. 在.net中给我们提供了非常好的缓存机制.页面缓存.数据缓存,还有非常好的依赖缓存. 依赖缓存优点就 ...

  2. win7-时间更新

    今天发现电脑的时间不对,后来就自己摸索了时间的自动更新方法.自己记录下来,以方便以后忘了查询 点击电脑右下角的时间->选择更改日期和时间设置->选择internet->更改设置-&g ...

  3. 李笑来~执行力WWH

    什么是秘密 秘密是指只有极少数人知道的实用信息.这个实用信息可以为知道且懂得运用的人获得收益,这个收益可能包括钱.名声和快感. 什么是执行力 执行力=What + Why + How,即WWH 执行力 ...

  4. 27.mutex跨进程通信

    创建互斥量mutex HANDLE mutex = CreateMutexA(NULL, TRUE, name); 根据id打开mutex HANDLE mutex = OpenMutexA(MUTE ...

  5. 3.1 Broker Configs 官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 3.1 Broker Configs 3.1 broker配置 The essent ...

  6. Python Jsonpath模块用法

    在使用Python做自动化校验的时候,经常会从Json数据中取值,所以会用到Jsonpath模块,这里做个简单的总结 1.关于jsonpath用来解析多层嵌套的json数据;JsonPath 是一种信 ...

  7. unity-unet-同步各个player唯一标识

    Multiplayer Game 中所有 player 都有一个唯一标识.在unet中可以通过 Network Identity 组件获取到该 player 在整个网络整的 唯一 的连接 id 这里测 ...

  8. 14.inline与namespace使用

    #include <iostream> using namespace std; namespace all { //inline作用为默认调用 inline namespace V201 ...

  9. JavaScript篇(一)二叉树的插入 (附:可视化)

    一.二叉树概念 二叉树(binary tree)是一颗树,其中每个节点都不能有多于两个的儿子. 字节一面,第一道就是二叉树的插入,在这里其实是对于一个二叉查找树的插入. 使二叉树成为二叉查找树的性质是 ...

  10. Spring MVC基础了解

    参考网址:https://www.yiibai.com/spring_mvc/springmvc_overview.html Spring框架相关 Spring Security 一个灵活强大的身份验 ...