學習目錄

• Angular 4 依賴注入教程之一 依賴注入簡介
• Angular 4 依賴注入教程之二 組件服務注入
• Angular 4 依賴注入教程之三 ClassProvider的使用
• Angular 4 依賴注入教程之四 FactoryProvider的使用
• Angular 4 依賴注入教程之五 FactoryProvider配置依賴對象
• Angular 4 依賴注入教程之六 Injectable 裝飾器
• Angular 4 依賴注入教程之七 ValueProvider的使用
• Angular 4 依賴注入教程之八 InjectToken的使用

前言

本文屬于Angular 4依賴注入學習系列文章的第三篇，主要給大家介紹了Angular 4依賴注入之ClassProvider使用的相關內(nèi)容，分享出來供大家參考學習，下面來看看詳細的介紹：

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

• Angular 4 +
• Angular CLI
• TypeScript

基礎知識

Provider 的作用

在 Angular 中我們通過 Provider 來描述與 Token 相關聯(lián)的依賴對象的創(chuàng)建方式。在 Angular 中依賴對象的創(chuàng)建方式分為以下四種：

• useClass
• useValue
• useExisting
• useFactory

(圖一：注入器、Provider與依賴對象關系)

Provider 的分類

在 Angular 中 Provider 主要分為：

• TypeProvider
• ClassProvider
• ValueProvider
• ExistingProvider
• FactoryProvider
  

ClassProvider

ClassProvider 接口定義

export interface ClassProvider {
 // 用于設置與依賴對象關聯(lián)的Token值，Token值可能是Type、InjectionToken、
 // OpaqueToken的實例或字符串
 provide: any; 
 useClass: Type<any>;
 // 用于標識是否multiple providers，若是multiple類型，則返回與Token關聯(lián)的依賴
 // 對象列表
 multi?: boolean; 
}

看完上面的接口定義，相信一些讀者會覺得陌生。在本系列教程第二小節(jié)中，我們用到了 TypeProvider。

不信你往下看：

@NgModule({
 ...
 providers: [HeroService], // 方式一
 bootstrap: [AppComponent]
})
export class AppModule { }

// TypeProvider接口
export interface TypeProvider extends Type<any> {}

那跟 ClassProvider 有什么關系？先不急，請你繼續(xù)往下看：

@NgModule({
 ...
 providers: [{
 provide: HeroService, useClass: HeroService // 方式二
 }],
 bootstrap: [AppComponent]
})
export class AppModule { }

是不是終于看到了 useClass 。其實上面兩種方式是等價的，方式一更加簡潔，方式二是采用標準的語法哈。那么問題來了，什么時候要使用 useClass 語法？回答這個問題前，我們先看個需求。

假設由于業(yè)務需要，先前我們定義的 HeroService 的數(shù)據(jù)，需要從服務器獲取，而不是使用靜態(tài)數(shù)據(jù)。項目采用前后端分離的開發(fā)方式進行開發(fā)，此外在項目開發(fā)前已經(jīng)協(xié)商好數(shù)據(jù)格式，也給出了對應的模擬數(shù)據(jù)(測試數(shù)據(jù))。

那么除了修改原有的 HeroService 服務外，有沒有其它方式可以方便地驗證一下模擬數(shù)據(jù)，同時保持較小的改動量哈。其實我們可以創(chuàng)建一個新的數(shù)據(jù)服務，如 MockHeroService ，具體實現(xiàn)如下：

創(chuàng)建 MockHeroService 服務

export class MockHeroService {
 heros: Array<{ id: number; name: string }> = [
 { id: 16, name: 'RubberMan' },
 { id: 17, name: 'Dynama' },
 { id: 18, name: 'Dr IQ' },
 { id: 19, name: 'Magma' },
 { id: 20, name: 'Tornado' }
 ];

 getHeros() {
 return this.heros;
 }
}

使用 MockHeroService 服務

@NgModule({
 ...
 providers: [{
 provide: HeroService, useClass: MockHeroService
 }],
 bootstrap: [AppComponent]
})
export class AppModule { }

更新完相關的代碼，正常情況下，在 http://localhost:4200/ 頁面，你將看到以下的內(nèi)容：

ID: 16 - Name: RubberMan
ID: 17 - Name: Dynama
ID: 18 - Name: Dr IQ
ID: 19 - Name: Magma
ID: 20 - Name: Tornado

其實服務命名為 MockHeroService 的目的，也是為了說明依賴注入的好處，即易于進行本地單元測試。此外假設沒有利用 Angular 依賴注入的特性，我們需要修改應用中每個應用到 HeroService 的地方。

我有話說

ClassProvider 接口中的 Type 類型是什么？

export interface Type<T> extends Function { new (...args: any[]): T; }

export function isType(v: any): v is Type<any> {
 return typeof v === 'function';
}

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論