Angular 4 依賴注入教程之八 InjectToken的使用

目錄

閱讀須知

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

基礎(chǔ)知識

OpaqueToken 簡介

OpaqueToken 用于創(chuàng)建可在 Provider 中使用的 Token

OpaqueToken 類的定義

export class OpaqueToken {
  constructor(protected _desc: string) {}

  toString(): string { return `Token ${this._desc}`; }
}

OpaqueToken 類的使用

import { ReflectiveInjector } from '@angular/core';

var t = new OpaqueToken("value");
var injector = ReflectiveInjector.resolveAndCreate([
  {provide: t, useValue: "bindingValue"}
]);
injector.get(t); // "bindingValue"

InjectionToken 簡介

InjectionToken 用于創(chuàng)建可在 Provider 中使用的 Token糯俗。

InjectionToken 類的定義

export class InjectionToken<T> extends OpaqueToken {
  private _differentiate_from_OpaqueToken_structurally: any;
  constructor(desc: string) { super(desc); }

  toString(): string { return `InjectionToken ${this._desc}`; }
}

InjectionToken 類的使用

import { ReflectiveInjector } from '@angular/core';

var t = new InjectionToken<string>("value");
var injector = ReflectiveInjector.resolveAndCreate([
  {provide: t, useValue: "bindingValue"}
]);
injector.get(t); // "bindingValue"

InjectionToken

在介紹 InjectionToken 相關(guān)內(nèi)容之前俭识,我們先回顧一下 "ValueProvider的使用" 這篇中我們介紹的內(nèi)容:

使用 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())
    }
}

為了能夠更方便地管理與維護 apiUrl 地址榄攀,我們利用了 ValueProviderInject 裝飾器秉溉。一切看起來非常順利袍冷,但某一天假設(shè)我們引入了一個第三方庫 - third-lib.ts念秧,該文件的內(nèi)容如下所示:

export const THIRD_PARTY_PROVIDERS = [
    {
        provide: 'apiUrl',
        useValue: 'Other Url'
    }
];

接著我們在 AppModule 中配置對應(yīng)的 Provider 信息鸽心,具體如下:

import { THIRD_PARTY_PROVIDERS } from './third-party';

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

當更新完上述代碼,成功保存后史简,你會發(fā)現(xiàn) http://localhost:4200/ 頁面乃秀,又是空空如也了。這時如果我們打開開發(fā)者工具,切換到 Console 面板你會看到如下異常信息:

GET http://localhost:4200/Other%20value 404 (Not Found)

什么情況跺讯,我們的英雄信息的接口地址被替換了枢贿,其實真正的原因是使用字符串作為 Token 引起沖突了。那么怎么解決呢刀脏?最簡單的方式是對調(diào)一下 ValueProviderTHIRD_PARTY_PROVIDERS 的位置局荚。你會發(fā)現(xiàn)在 http://localhost:4200/ 頁面,你又能看到英雄信息愈污。當然這不能解決本質(zhì)問題耀态,因為這樣會導(dǎo)致你引入的第三方庫不能正常工作。

相信很多讀者已經(jīng)習(xí)慣了我的 "套路"钙畔,當然要讓我們的主角 - InjectionToken 出馬茫陆,來解決這個問題咯金麸。為了統(tǒng)一管理應(yīng)用中的 Token 信息 擎析,我們新建一個 app.tokens.ts 文件來保存應(yīng)用中的 Token 信息。該文件的具體內(nèi)容如下:

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('apiUrl');

接下來我們在更新一下 AppModule

import { API_URL } from './app.tokens';

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

然后在更新 HeroService 服務(wù)挥下,具體更新內(nèi)容如下:

import { API_URL } from './app.tokens';

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

當更新完上述代碼揍魂,成功保存后,你會發(fā)現(xiàn) http://localhost:4200/ 頁面棚瘟,又能正常顯示英雄信息了现斋。問題已經(jīng)解決了,但其實這是因為我們使用了不同的 Token 偎蘸。我們再來驗證一個問題:

import { InjectionToken } from '@angular/core';

const API_URL = new InjectionToken<string>('apiUrl');

export const THIRD_PARTY_PROVIDERS = [
    {
        provide: API_URL,
        useValue: 'Other value'
    }
];

你會發(fā)現(xiàn)更新完 third-lib.ts 庫庄蹋,且成功保存后,在 http://localhost:4200/ 頁面迷雪,還是能正常顯示英雄信息限书。此時,我們的 Angular 4 依賴注入教程已經(jīng)結(jié)束了章咧,但其實本教程只介紹了 Angular 依賴注入的部分知識倦西。如果讀者有興趣的話,可以繼續(xù)了解以下的內(nèi)容:

  • Angular 4.x Provider
    • 涉及 useClass赁严、useValue扰柠、useExisting、useFactory 及 Provider 使用方式疼约。
  • Angular 4.x Multi Providers
    • 涉及 multi provider 作用及 Angular 4.x 內(nèi)部應(yīng)用卤档。
  • Angular 4.x Forward Reference
    • 涉及 forwardRef 的作用及內(nèi)部工作原理,同時解釋 JavaScript 解釋器不能自動提升 Class程剥。
  • Angular 4.x OpaqueToken & InjectionToken
    • 涉及使用字符串作為 Token存在問題劝枣,詳細介紹如何使用 OpaqueToken、InjectionToken 解決問題。
  • Angular 4.x IoC & DI
    • 涉及 IoC 和 DI哨免、DI 在 AngularJS 1.x 中的應(yīng)用茎活、內(nèi)部工作原理及存在的問題等。
  • Angular 4.x Injector
    • 涉及依賴注入的概念及Angular 4.x 注入器的內(nèi)部實現(xiàn) (慎入)琢唾。
  • Angular Element Injector
    • 尚未完成载荔,敬請期待

我有話說

OpaqueToken 與 InjectionToken 有什么區(qū)別?

相同點

  • 它們都是用于創(chuàng)建可在 Provider 中使用的 Token采桃。

不同點

  • OpaqueTokenAngular 2.x 版本中引入的類懒熙。
  • InjectionToken 是在 Angular 4.x 版本中引入的類,該類繼承于 OpaqueToken普办,且引入了泛型用于定義所關(guān)聯(lián)的依賴對象的類型工扎。

AngularJS 1.x DI 系統(tǒng)存在的問題

  • 內(nèi)部緩存:AngularJS 1.x 應(yīng)用程序中所有的依賴項都是單例,我們不能靈活地控制是否使用新的實例衔蹲。
  • 命名空間沖突: 在系統(tǒng)中我們使用字符串來標識服務(wù) (Service) 的名稱肢娘,假設(shè)我們在項目中已有一個 CarService,然而第三方庫中也引入了同樣的服務(wù)舆驶,這樣的話就容易出現(xiàn)沖突橱健。
  • DI 耦合度太高: AngularJS 1.x 中 DI 功能已經(jīng)被框架集成了,我們不能單獨使用它的依賴注入功能沙廉。
  • 未能和模塊加載器結(jié)合: 在瀏覽器環(huán)境中拘荡,很多場景都是異步的過程,我們需要的依賴模塊并不是一開始就加載好的撬陵,或許我們在創(chuàng)建的時候才會去加載依賴模塊珊皿,再進行依賴創(chuàng)建,而 AngularJS 1.x 的 DI 系統(tǒng)沒法做到這點巨税。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蟋定,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子垢夹,更是在濱河造成了極大的恐慌溢吻,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件果元,死亡現(xiàn)場離奇詭異促王,居然都是意外死亡,警方通過查閱死者的電腦和手機而晒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門蝇狼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人倡怎,你說我怎么就攤上這事迅耘〖妫” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵颤专,是天一觀的道長纽哥。 經(jīng)常有香客問我,道長栖秕,這世上最難降的妖魔是什么春塌? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮簇捍,結(jié)果婚禮上只壳,老公的妹妹穿的比我還像新娘。我一直安慰自己暑塑,他們只是感情好吼句,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著事格,像睡著了一般惕艳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上分蓖,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天尔艇,我揣著相機與錄音尔许,去河邊找鬼么鹤。 笑死,一個胖子當著我的面吹牛味廊,可吹牛的內(nèi)容都是我干的蒸甜。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼余佛,長吁一口氣:“原來是場噩夢啊……” “哼柠新!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起辉巡,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤恨憎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后郊楣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憔恳,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年净蚤,在試婚紗的時候發(fā)現(xiàn)自己被綠了钥组。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡今瀑,死狀恐怖程梦,靈堂內(nèi)的尸體忽然破棺而出点把,到底是詐尸還是另有隱情,我是刑警寧澤屿附,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布郎逃,位于F島的核電站,受9級特大地震影響挺份,放射性物質(zhì)發(fā)生泄漏衣厘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一压恒、第九天 我趴在偏房一處隱蔽的房頂上張望影暴。 院中可真熱鬧,春花似錦探赫、人聲如沸型宙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妆兑。三九已至,卻和暖如春毛仪,著一層夾襖步出監(jiān)牢的瞬間搁嗓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工箱靴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留腺逛,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓衡怀,卻偏偏與公主長得像棍矛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子抛杨,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容