學習目錄

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

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

基礎知識

OpaqueToken 簡介

OpaqueToken 用于創建可在 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 用于創建可在 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 相關內容之前，我們先回顧一下 "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()) }}

為了能夠更方便地管理與維護 apiUrl 地址，我們利用了 ValueProvider 和 Inject 裝飾器。一切看起來非常順利，但某一天假設我們引入了一個第三方庫 - third-lib.ts，該文件的內容如下所示：