欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular 4 依賴注入學(xué)習(xí)教程之FactoryProvider的使用(四)

 更新時(shí)間:2017年06月04日 09:44:05   作者:semlinker  
這篇文章主要給大家介紹了關(guān)于Angular 4 依賴注入之FactoryProvider使用的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。

學(xué)習(xí)目錄

前言

本文屬于Angular 4 依賴注入學(xué)習(xí)系列的第四篇,主要介紹了Angular 4 依賴注入之FactoryProvider的使用,感興趣的朋友們下面來(lái)看看詳細(xì)的介紹:

本系列教程的開(kāi)發(fā)環(huán)境及開(kāi)發(fā)語(yǔ)言:

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

FactoryProvider 的作用

FactoryProvider 用于告訴 Injector (注入器),通過(guò)調(diào)用 useFactory 對(duì)應(yīng)的函數(shù),返回 Token 對(duì)應(yīng)的依賴對(duì)象。

FactoryProvider 的使用

function serviceFactory() { 
 return new Service();
}

const provider: FactoryProvider = {
 provide: 'someToken', useFactory: serviceFactory, deps: []
};

FactoryProvider 接口

export interface FactoryProvider {
 // 用于設(shè)置與依賴對(duì)象關(guān)聯(lián)的Token值,Token值可能是Type、InjectionToken、
 // OpaqueToken的實(shí)例或字符串
 provide: any;
 // 設(shè)置用于創(chuàng)建對(duì)象的工廠函數(shù)
 useFactory: Function;
 // 依賴對(duì)象列表
 deps?: any[];
 // 用于標(biāo)識(shí)是否multiple providers,若是multiple類型,則返回與Token關(guān)聯(lián)的依賴
 // 對(duì)象列表
 multi?: boolean;
}

FactoryProvider

介紹完基礎(chǔ)知識(shí),接下來(lái)我們馬上進(jìn)入正題。不知道大家是否還記得,之前我們創(chuàng)建過(guò)的 HeroComponent 組件:

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';

@Component({
 selector: 'app-hero',
 template: `
 <ul>
 <li *ngFor="let hero of heros">
 ID: {{hero.id}} - Name: {{hero.name}}
 </li>
 </ul>
 `
})
export class HeroComponent implements OnInit {

 constructor(private heroService: HeroService) { }

 heros: Array<{ id: number; name: string }>;

 ngOnInit() {
 this.heros = this.heroService.getHeros();
 }
}

那么現(xiàn)在問(wèn)題來(lái)了,假設(shè)我們想在獲取英雄數(shù)據(jù)時(shí),輸出調(diào)試信息,那應(yīng)該怎么辦?What ~,這個(gè)問(wèn)題不是很簡(jiǎn)單么,直接使用 console.log API 輸出相應(yīng)信息不就行了么:

console.log('Fetching heros...');
this.heros = this.heroService.getHeros();

那問(wèn)題又來(lái)了,如果多個(gè)組件都使用 HeroService 去獲取英雄數(shù)據(jù),那么是不是每個(gè)組件都得添加對(duì)應(yīng)的語(yǔ)句。另外如果要修改輸出的調(diào)試信息,那就得修改程序中多個(gè)地方。其實(shí)我們一般只需要在開(kāi)發(fā)階段,輸出調(diào)試信息,因此上面的方案不合理,也不夠靈活。

其實(shí)我們可以借鑒之前引入 HeroService 服務(wù)的思路,創(chuàng)建一個(gè) LoggerService 來(lái)解決上面提到的問(wèn)題。

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

export class LoggerService {
 constructor(private enable: boolean) { }

 log(message: string) {
 if(this.enable) {
  console.log(`LoggerService: ${message}`);
 }
 }
}

配置 LoggerService 服務(wù)

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

使用 LoggerService 服務(wù)

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';
import { LoggerService } from './../logger.service';

@Component({
 selector: 'app-hero',
 template: `
 <ul>
 <li *ngFor="let hero of heros">
 ID: {{hero.id}} - Name: {{hero.name}}
 </li>
 </ul>
 `
})
export class HeroComponent implements OnInit {
 heros: Array<{ id: number; name: string }>;

 constructor(private heroService: HeroService,
 private loggerService: LoggerService) { }

 ngOnInit() {
 this.loggerService.log('Fetching heros...');
 this.heros = this.heroService.getHeros();
 }
}

以上代碼運(yùn)行后會(huì)拋出以下異常信息:

Uncaught Error: Can't resolve all parameters for LoggerService: (?).

有的讀者,眼睛一亮,可能是你在創(chuàng)建 LoggerService 服務(wù)時(shí),忘記使用 @Injectable 裝飾器了。哈哈,其實(shí)我是故意的,但我加上 @Injectable() 后,還是拋出了以下異常:

ERROR Error: No provider for Boolean!

為什么會(huì)出現(xiàn)上面的異常信息呢?我們?cè)倏匆幌虑懊鎰?chuàng)建的 LoggerService 服務(wù):

export class LoggerService {
 constructor(private enable: boolean) { }
 // ...
}

在 Angular 中我們通過(guò)構(gòu)造注入的方式注入依賴對(duì)象, private enable: boolean 這種方式表示我們要注入 Type 類型的對(duì)象。然后 boolean 是表示基本數(shù)據(jù)類型,并不是所需的 Type 類型:

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

接下來(lái)我們?cè)賮?lái)看一下最早拋出的異常:

Uncaught Error: Can't resolve all parameters for LoggerService: (?).

其實(shí)問(wèn)題的答應(yīng)也在 LoggerService 類的構(gòu)造函數(shù)中,在創(chuàng)建 LoggerService 對(duì)象時(shí),我們需要設(shè)置 enable 參數(shù)的值。那么如何解決呢? 當(dāng)然可以使用我們的主角 - FactoryProvider 。

具體如下:

使用 FactoryProvider

@NgModule({
 ...,
 providers: [
 HeroService,
 {
 provide: LoggerService, 
 useFactory: () => {
 return new LoggerService(true);
 }
 }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

當(dāng)更新完代碼,然后再來(lái)一個(gè)華麗的保存操作,最后打開(kāi)你的控制臺(tái),你將看到預(yù)期的輸出信息:

LoggerService: Fetching heros...

難道就這樣結(jié)束了,關(guān)于 FactoryProvider 的相關(guān)內(nèi)容先告一段落,下一篇我們將介紹如何使用 FactoryProvider 配置依賴對(duì)象。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者使用Angular 4能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • AngularJS ng-style中使用filter

    AngularJS ng-style中使用filter

    這篇文章主要介紹了AngularJS ng-style中使用filter的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • AngularJS入門教程之MVC架構(gòu)實(shí)例分析

    AngularJS入門教程之MVC架構(gòu)實(shí)例分析

    這篇文章主要介紹了AngularJS的MVC架構(gòu),結(jié)合實(shí)例形式重點(diǎn)分析了ng-controller聲明并使用控制器的操作技巧與控制器作用域的相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-11-11
  • 淺析AngularJS中的指令

    淺析AngularJS中的指令

    指令(Directives)是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令,但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令
    2016-03-03
  • 詳解Angular4 路由設(shè)置相關(guān)

    詳解Angular4 路由設(shè)置相關(guān)

    本篇文章主要介紹了詳解Angular4 路由設(shè)置相關(guān),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • Angular2 Service實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器服務(wù)

    Angular2 Service實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器服務(wù)

    本篇文章主要介紹了Angular2 Service實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器服務(wù) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • AnglarJs中的上拉加載實(shí)現(xiàn)代碼

    AnglarJs中的上拉加載實(shí)現(xiàn)代碼

    上拉加載,是目前手機(jī)網(wǎng)站加載數(shù)據(jù)的一種常用方式,本文主要講解AnglarJs集成,上拉加載功能。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
    2018-02-02
  • Angularjs中如何使用filterFilter函數(shù)過(guò)濾

    Angularjs中如何使用filterFilter函數(shù)過(guò)濾

    這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過(guò)濾的相關(guān)資料,需要的朋友可以參考下
    2016-02-02
  • Angular中的NgZone.run()有什么用途

    Angular中的NgZone.run()有什么用途

    在Angular中,NgZone是一個(gè)服務(wù),用于管理異步任務(wù)的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運(yùn)行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運(yùn)行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧
    2024-01-01
  • AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法

    AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下
    2016-11-11
  • Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例

    Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例

    這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法,需要的朋友可以參考下
    2017-07-07

最新評(píng)論