這篇文章主要為大家展示了“Angular4中ValueProvider怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Angular4中ValueProvider怎么用”這篇文章吧。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供忻州企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、網(wǎng)站建設、H5開發(fā)、小程序制作等業(yè)務。10年已為忻州眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

本系列教程的開發(fā)環(huán)境及開發(fā)語言：

• Angular 4 +

• Angular CLI

• TypeScript

基礎知識

ValueProvider 的作用

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

ValueProvider 的使用

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

ValueProvider 接口

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

json-server 簡介

json-server 用于基于 JSON 數(shù)據(jù)快速地創(chuàng)建本地模擬的 REST API。

json-server 的安裝

npm install -g json-server

json-server 的使用

json-server --watch db.json

Angular CLI 代理配置

創(chuàng)建 proxy.conf.json 文件

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

更新 package.json 文件

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

ValueProvider

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

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

接下來我們將重構我們的 HeroService 服務，從 API 接口中獲取英雄數(shù)據(jù)。要使用 Angular 的 Http 服務，首先需要在 AppModule 模塊中導入 HttpModule ，然后在 HeroService 類的構造函數(shù)中注入 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())
 }
}

在 HeroService 服務中，我們通過注入 Http 服務對象的get()方法發(fā)送 HTTP 請求，從而從 API 接口中獲取英雄的數(shù)據(jù)。

更新 HeroComponent 組件

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';
import { LoggerService } from '../logger.service';

@Component({
 selector: 'app-hero',
 template: `
 <ul>
 <li *ngFor="let hero of heros">
 ID: {{hero.id}} - Name: {{hero.name}}
 </li>
 </ul>
 `
})
export class HeroComponent implements OnInit {
 heros: Array<{ id: number; name: string }>;

 constructor(private heroService: HeroService,
 private loggerService: LoggerService) { }

 ngOnInit() {
 this.loggerService.log('Fetching heros...');
 this.heroService.getHeros()
 .subscribe(res => {
 this.heros = res;
 });
 }
}

更新完上述代碼，成功保存后，你會發(fā)現(xiàn) http://localhost:4200/ 頁面，一片空白。這就對了，因為我們還沒有啟動本地的 json-server 服務器。接下來我們來配置并啟動本地的 json-server 服務器：

創(chuàng)建 heros.json 文件

{
 "heros": [
 {"id":11,"name":"Mr. Nice"},
 {"id":12,"name":"Narco"},
 {"id":13,"name":"Bombasto"},
 {"id":14,"name":"Celeritas"},
 {"id":15,"name":"Magneta"}
 ]
}

啟動 json-server 服務器

json-server --watch heros.json

當成功啟動 json-server 服務器，在命令行中，你將看到以下輸出信息：

\{^_^}/ hi!

Loading heros.json
Done

這表示本地 json-server 已經(jīng)成功啟動，此時重新刷新以下 http://localhost:4200/ 頁面，你將看到以下信息：

ID: 11 - Name: Mr. Nice
ID: 12 - Name: Narco
ID: 13 - Name: Bombasto
ID: 14 - Name: Celeritas
ID: 15 - Name: Magneta

程序終于又正常運行了，但注意到 HeroService 服務中，我們通過以下方式定義 API 接口地址：

@Injectable()
export class HeroService {
 ...
 apiUrl = 'http://localhost:4200/heros';
}

這種方式有個問題，假設其它服務也要使用該地址，那么就得按照同樣的方式去定義 API 接口地址。另外假設 API 接口地址需要更新，那就需要修改多個地方。針對上述問題，我們可以使用 ValueProvider 來解決問題。

使用 ValueProvider

@NgModule({
 ...,
 providers: [
 {
 provide: 'apiUrl',
 useValue: 'http://localhost:4200/heros'
 }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

更新 HeroService 服務

@Injectable()
export class HeroService {
 constructor(private loggerService: LoggerService,
 private http: Http,
 @Inject('apiUrl') private apiUrl) { }

 getHeros(): Observable<Array<{ id: number; name: string }>> {
 this.loggerService.log('Fetching heros...');
 return this.http.get(this.apiUrl)
  .map(res => res.json())
 }
}

在 HeroService 類的構造函數(shù)中，我們通過@Inject('apiUrl')方式，注入 apiUrl 該 Token 對應的依賴對象，即 'http://localhost:4200/heros' 。為什么不能使用private apiUrl: 'apiUrl'的方式，希望讀者好好回憶一下，之前我們介紹過的相關內容。

以上代碼成功運行后，在 http://localhost:4200/ 頁面，我們將看到預期的結果：

ID: 11 - Name: Mr. Nice
ID: 12 - Name: Narco
ID: 13 - Name: Bombasto
ID: 14 - Name: Celeritas
ID: 15 - Name: Magneta

我有話說

為什么在構造函數(shù)中，非 Type 類型的參數(shù)只能用@Inject(Something)的方式注入 ？
因為 Type 類型的對象，會被 TypeScript 編譯器編譯。即我們通過 class 關鍵字聲明的服務，最終都會編譯成 ES5 的函數(shù)對象。

在構造函數(shù)中，Type 類型的參數(shù)能用@Inject(Type)的方式注入么？

Type 類型的參數(shù)也能使用@Inject(Type)的方式注入，具體如下：

constructor(@Inject(Http) private http) { }

同樣也可以使用以下方式：

constructor(@Inject(Http) private http: Http) { }

第一種方式雖然可以正常編譯，但 IDE 會有如下的提示信息：

[ts] Parameter 'http' implicitly has an 'any' type.

第二種方式，雖然 Angular 內部會合并design:paramtypes與 parameters 內的 metadata 信息，但本人覺得是有點冗余了。 總而言之，若果是 Type 類型的參數(shù)，推薦使用下面的方式：

constructor(private http: Http) { }

以上是“Angular4中ValueProvider怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享文章：Angular4中ValueProvider怎么用-創(chuàng)新互聯(lián)
當前鏈接：http://chinadenli.net/article34/ccjcpe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、標簽優(yōu)化、外貿建站、做網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)