Angular 4依賴注入學(xué)習(xí)教程之ValueProvider的使用（七）
學(xué)習(xí)目錄
- Angular 4 依賴注入教程之一 依賴注入簡介
- Angular 4 依賴注入教程之二 組件服務(wù)注入
- Angular 4 依賴注入教程之三 ClassProvider的使用
- Angular 4 依賴注入教程之四 FactoryProvider的使用
- Angular 4 依賴注入教程之五 FactoryProvider配置依賴對象
- Angular 4 依賴注入教程之六 Injectable 裝飾器
- Angular 4 依賴注入教程之七 ValueProvider的使用
- Angular 4 依賴注入教程之八 InjectToken的使用
前言
本文主要給大家介紹了關(guān)于Angular 4依賴注入之ValueProvider使用的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起詳細(xì)的介紹：
本系列教程的開發(fā)環(huán)境及開發(fā)語言：
基礎(chǔ)知識
ValueProvider 的作用
ValueProvider 用于告訴 Injector (注入器)，但使用 Token 獲取依賴對象時，則返回 useValue 指定的值。
ValueProvider 的使用
const provider: ValueProvider = {provide: 'someToken', useValue: 'someValue'};
ValueProvider 接口
export interface ValueProvider {
// 用于設(shè)置與依賴對象關(guān)聯(lián)的Token值，Token值可能是Type、InjectionToken、
// OpaqueToken的實(shí)例或字符串
provide: any;
// 設(shè)置注入的對象
useValue: any;
// 用于標(biāo)識是否multiple providers，若是multiple類型，則返回與Token關(guān)聯(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
介紹完基礎(chǔ)知識，我們馬上進(jìn)入正題。不知道大家是否還記得，在 "組件服務(wù)注入" 文章中提到的內(nèi)容：
難道一切就這么結(jié)束了，No！ No！別忘記了我們這節(jié)課的主題是介紹如何在組件中注入服務(wù)。在目前的 HeroComponent 組件，我們的英雄列表信息是固定的，在實(shí)際的開發(fā)場景中，一般需要從遠(yuǎn)程服務(wù)器獲取相應(yīng)的信息。
接下來我們將重構(gòu)我們的 HeroService 服務(wù)，從 API 接口中獲取英雄數(shù)據(jù)。要使用 Angular 的 Http 服務(wù)，首先需要在 AppModule 模塊中導(dǎo)入 HttpModule ，然后在 HeroService 類的構(gòu)造函數(shù)中注入 Http 服務(wù)。
更新 HeroService 服務(wù)
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 服務(wù)中，我們通過注入 Http 服務(wù)對象的 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 服務(wù)器。接下來我們來配置并啟動本地的 json-server 服務(wù)器：
創(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 服務(wù)器
json-server --watch heros.json
當(dāng)成功啟動 json-server 服務(wù)器，在命令行中，你將看到以下輸出信息：
\{^_^}/ 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
程序終于又正常運(yùn)行了，但注意到 HeroService 服務(wù)中，我們通過以下方式定義 API 接口地址：
@Injectable()
export class HeroService {
...
apiUrl = 'http://localhost:4200/heros';
}
這種方式有個問題，假設(shè)其它服務(wù)也要使用該地址，那么就得按照同樣的方式去定義 API 接口地址。另外假設(shè) API 接口地址需要更新，那就需要修改多個地方。針對上述問題，我們可以使用 ValueProvider 來解決問題。
使用 ValueProvider
@NgModule({
...,
providers: [
{
provide: 'apiUrl',
useValue: 'http://localhost:4200/heros'
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
更新 HeroService 服務(wù)
@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 類的構(gòu)造函數(shù)中，我們通過 @Inject('apiUrl') 方式，注入 apiUrl 該 Token 對應(yīng)的依賴對象，即 'http://localhost:4200/heros' 。為什么不能使用 private apiUrl: 'apiUrl' 的方式，希望讀者好好回憶一下，之前我們介紹過的相關(guān)內(nèi)容。
以上代碼成功運(yùn)行后，在 http://localhost:4200/ 頁面，我們將看到預(yù)期的結(jié)果：
ID: 11 - Name: Mr. Nice ID: 12 - Name: Narco ID: 13 - Name: Bombasto ID: 14 - Name: Celeritas ID: 15 - Name: Magneta
我有話說
為什么在構(gòu)造函數(shù)中，非 Type 類型的參數(shù)只能用 @Inject(Something) 的方式注入 ？
因為 Type 類型的對象，會被 TypeScript 編譯器編譯。即我們通過 class 關(guān)鍵字聲明的服務(wù)，最終都會編譯成 ES5 的函數(shù)對象。
在構(gòu)造函數(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 內(nèi)部會合并 design:paramtypes 與 parameters 內(nèi)的 metadata 信息，但本人覺得是有點(diǎn)冗余了。 總而言之，若果是 Type 類型的參數(shù)，推薦使用下面的方式：
constructor(private http: Http) { }
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者使用Angular 4能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Ionic + Angular.js實(shí)現(xiàn)驗證碼倒計時功能的方法
驗證碼倒計時這個功能相信對大家每個人來說都不陌生，之前介紹了在Android中的實(shí)現(xiàn)方法，下面這篇文章主要給大家介紹了利用Ionic + Angular.js實(shí)現(xiàn)驗證碼倒計時功能的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。2017-06-06
Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能,結(jié)合實(shí)例形式分析了AngularJS簡單控制頁面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Angular的$http的ajax的請求操作的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要給大家介紹了關(guān)于Angular CLI發(fā)布路徑的配置項的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
AngularJS中一般函數(shù)參數(shù)傳遞用法分析
這篇文章主要介紹了AngularJS中一般函數(shù)參數(shù)傳遞用法,結(jié)合實(shí)例形式分析了模型參數(shù)與普通參數(shù)的具體功能與使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angularjs 制作購物車功能實(shí)例代碼的相關(guān)資料,并附示例代碼，需要的朋友可以參考下2016-09-09
angular2路由之routerLinkActive指令【推薦】
這篇文章主要介紹了angular2路由之routerLinkActive指令的相關(guān)資料,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了AngularJS表格添加序號的方法,涉及AngularJS表格的遍歷及序號添加實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
淺談angular4 ng-content 中隱藏的內(nèi)容
本篇文章主要介紹了淺談angular4 ng-content 中隱藏的內(nèi)容，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
AngularJs 利用百度地圖API 定位當(dāng)前位置 獲取地址信息
本文主要介紹了AngularJs 利用百度地圖API 定位當(dāng)前位置 獲取地址信息的方法步驟。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01