學習目錄

前言

本文主要給大家介紹了關于Angular 4依賴注入之ValueProvider使用的相關內容，分享出來供大家參考學習，下面來一起詳細的介紹：

本系列教程的開發環境及開發語言：

基礎知識

ValueProvider 的作用

ValueProvider 用于告訴 Injector (注入器)，但使用 Token 獲取依賴對象時，則返回 useValue 指定的值。

ValueProvider 的使用

const provider: ValueProvider = {provide: 'someToken', useValue: 'someValue'};

ValueProvider 接口

export interface ValueProvider { // 用于設置與依賴對象關聯的Token值，Token值可能是Type、InjectionToken、 // OpaqueToken的實例或字符串 provide: any; // 設置注入的對象 useValue: any; // 用于標識是否multiple providers，若是multiple類型，則返回與Token關聯的依賴 // 對象列表 multi?: boolean;}

json-server 簡介

json-server 用于基于 JSON 數據快速地創建本地模擬的 REST API。

json-server 的安裝

npm install -g json-server

json-server 的使用

json-server --watch db.json

Angular CLI 代理配置

創建 proxy.conf.json 文件

{ "/heros": { "target": "http://localhost:3000", "secure": false }}

更新 package.json 文件

{ "scripts": { "start": "ng serve --proxy-config proxy.conf.json", }}

ValueProvider

介紹完基礎知識，我們馬上進入正題。不知道大家是否還記得，在 "組件服務注入" 文章中提到的內容：

難道一切就這么結束了，No！ No！別忘記了我們這節課的主題是介紹如何在組件中注入服務。在目前的 HeroComponent 組件，我們的英雄列表信息是固定的，在實際的開發場景中，一般需要從遠程服務器獲取相應的信息。

接下來我們將重構我們的 HeroService 服務，從 API 接口中獲取英雄數據。要使用 Angular 的 Http 服務，首先需要在 AppModule 模塊中導入 HttpModule ，然后在 HeroService 類的構造函數中注入 Http 服務。

更新 HeroService 服務

import { Injectable } from '@angular/core';import { Http } from '@angular/http';import { Observable } from 'rxjs/Observable';import 'rxjs/add/operator/map';import { LoggerService } from './logger.service';@Injectable()export class HeroService { constructor(private loggerService: LoggerService, private http: Http) { } apiUrl = 'http://localhost:4200/heros'; getHeros(): Observable<Array<{ id: number; name: string }>> { this.loggerService.log('Fetching heros...'); return this.http.get(this.apiUrl)  .map(res => res.json()) }}