溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
學習目錄
本文主要給大家介紹的是關于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，該文件的內容如下所示：
export const THIRD_PARTY_PROVIDERS = [
{
provide: 'apiUrl',
useValue: 'Other Url'
}
];
接著我們在 AppModule 中配置對應的 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 { }
當更新完上述代碼，成功保存后，你會發現 http://localhost:4200/ 頁面，又是空空如也了。這時如果我們打開開發者工具，切換到 Console 面板你會看到如下異常信息：
GET http://localhost:4200/Other%20value 404 (Not Found)
什么情況，我們的英雄信息的接口地址被替換了，其實真正的原因是使用字符串作為 Token 引起沖突了。那么怎么解決呢？最簡單的方式是對調一下 ValueProvider 與 THIRD_PARTY_PROVIDERS 的位置。你會發現在 http://localhost:4200/ 頁面，你又能看到英雄信息。當然這不能解決本質問題，因為這樣會導致你引入的第三方庫不能正常工作。
相信很多讀者已經習慣了我的 "套路"，當然要讓我們的主角 - InjectionToken 出馬，來解決這個問題咯。為了統一管理應用中的 Token 信息 ，我們新建一個 app.tokens.ts 文件來保存應用中的 Token 信息。
該文件的具體內容如下：
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 服務，具體更新內容如下：
import { API_URL } from './app.tokens';
@Injectable()
export class HeroService {
constructor(private loggerService: LoggerService,
private http: Http,
@Inject(API_URL) private apiUrl) { }
}
當更新完上述代碼，成功保存后，你會發現 http://localhost:4200/ 頁面，又能正常顯示英雄信息了。問題已經解決了，但其實這是因為我們使用了不同的 Token 。我們再來驗證一個問題：
import { InjectionToken } from '@angular/core';
const API_URL = new InjectionToken<string>('apiUrl');
export const THIRD_PARTY_PROVIDERS = [
{
provide: API_URL,
useValue: 'Other value'
}
];
你會發現更新完 third-lib.ts 庫，且成功保存后，在 http://localhost:4200/ 頁面，還是能正常顯示英雄信息。此時，我們的 Angular 4 依賴注入教程已經結束了。
我有話說
OpaqueToken 與 InjectionToken 有什么區別？
相同點
不同點
AngularJS 1.x DI 系統存在的問題
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者使用Angular 4能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
