国产亚洲精品a等一页,欧美精品二区

閱讀須知

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

Angular 4 +
Angular CLI
TypeScript

基礎(chǔ)知識(shí)

OpaqueToken 簡(jiǎn)介

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 簡(jiǎn)介

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

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

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

接著我們?cè)?AppModule 中配置對(duì)應(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 { }

當(dāng)更新完上述代碼，成功保存后，你會(huì)發(fā)現(xiàn) http://localhost:4200/ 頁(yè)面，又是空空如也了。這時(shí)如果我們打開開發(fā)者工具，切換到 Console 面板你會(huì)看到如下異常信息：

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

什么情況，我們的英雄信息的接口地址被替換了，其實(shí)真正的原因是使用字符串作為 Token 引起沖突了。那么怎么解決呢？最簡(jiǎn)單的方式是對(duì)調(diào)一下 ValueProvider 與 THIRD_PARTY_PROVIDERS 的位置。你會(huì)發(fā)現(xiàn)在 http://localhost:4200/ 頁(yè)面，你又能看到英雄信息。當(dāng)然這不能解決本質(zhì)問題，因?yàn)檫@樣會(huì)導(dǎo)致你引入的第三方庫(kù)不能正常工作。

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

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


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

接下來我們?cè)诟乱幌?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) { }
}

當(dāng)更新完上述代碼，成功保存后，你會(huì)發(fā)現(xiàn) http://localhost:4200/ 頁(yè)面，又能正常顯示英雄信息了。問題已經(jīng)解決了，但其實(shí)這是因?yàn)槲覀兪褂昧瞬煌?Token 。我們?cè)賮眚?yàn)證一個(gè)問題：

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


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


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

你會(huì)發(fā)現(xiàn)更新完 third-lib.ts 庫(kù)，且成功保存后，在 http://localhost:4200/ 頁(yè)面，還是能正常顯示英雄信息。此時(shí)，我們的 Angular 4 依賴注入教程已經(jīng)結(jié)束了，但其實(shí)本教程只介紹了 Angular 依賴注入的部分知識(shí)。如果讀者有興趣的話，可以繼續(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)部工作原理，同時(shí)解釋 JavaScript 解釋器不能自動(dòng)提升 Class。
Angular 4.x OpaqueToken & InjectionToken
- 涉及使用字符串作為 Token存在問題，詳細(xì)介紹如何使用 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)部實(shí)現(xiàn) (慎入)。
Angular Element Injector
- 尚未完成，敬請(qǐng)期待

我有話說

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

相同點(diǎn)

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

不同點(diǎn)

OpaqueToken 是 Angular 2.x 版本中引入的類。
InjectionToken 是在 Angular 4.x 版本中引入的類，該類繼承于 OpaqueToken，且引入了泛型用于定義所關(guān)聯(lián)的依賴對(duì)象的類型。

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

內(nèi)部緩存：AngularJS 1.x 應(yīng)用程序中所有的依賴項(xiàng)都是單例，我們不能靈活地控制是否使用新的實(shí)例。
命名空間沖突：在系統(tǒng)中我們使用字符串來標(biāo)識(shí)服務(wù) (Service) 的名稱，假設(shè)我們?cè)陧?xiàng)目中已有一個(gè) CarService，然而第三方庫(kù)中也引入了同樣的服務(wù)，這樣的話就容易出現(xiàn)沖突。
DI 耦合度太高： AngularJS 1.x 中 DI 功能已經(jīng)被框架集成了，我們不能單獨(dú)使用它的依賴注入功能。
未能和模塊加載器結(jié)合：在瀏覽器環(huán)境中，很多場(chǎng)景都是異步的過程，我們需要的依賴模塊并不是一開始就加載好的，或許我們?cè)趧?chuàng)建的時(shí)候才會(huì)去加載依賴模塊，再進(jìn)行依賴創(chuàng)建，而 AngularJS 1.x 的 DI 系統(tǒng)沒法做到這點(diǎn)。

InjectToken的使用