這篇文章主要介紹Angular4中ClassProvider怎么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為趙縣企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，趙縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

開發(fā)環(huán)境及開發(fā)語言：

• Angular 4 +

• Angular CLI

• TypeScript

基礎(chǔ)知識

Provider 的作用

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

• useClass

• useValue

• useExisting

• useFactory

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

Provider 的分類

在 Angular 中 Provider 主要分為：

• TypeProvider

• ClassProvider

• ValueProvider

• ExistingProvider

• FactoryProvider

ClassProvider

ClassProvider 接口定義

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

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

不信你往下看：

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

// TypeProvider接口
export interface TypeProvider extends Type {}

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

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

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

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

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

創(chuàng)建 MockHeroService 服務(wù)

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 服務(wù)

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

更新完相關(guān)的代碼，正常情況下，在 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

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

我有話說

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

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

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

以上是“Angular4中ClassProvider怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：Angular4中ClassProvider怎么用-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/dcciii.html