Angular?@Injectable注解的工作原理解析
正文
下面是 SAP 電商云 Spartacus UI 兩個(gè) Angular Service 類，都加上了 @Injectable 的注解，區(qū)別就在于是否具有輸入?yún)?shù) providedIn：
@Injectable() 裝飾器
@Injectable() 裝飾器指定 Angular 可以在 DI 系統(tǒng)中使用這個(gè)類。
這個(gè)注解的輸入元數(shù)據(jù)，providedIn: 'root'，意味著被注解的 Angular service 類，在整個(gè)應(yīng)用程序中都是可見(jiàn)的。
當(dāng)將服務(wù)（提供者）注入到我們的組件/服務(wù)中時(shí)，通過(guò)構(gòu)造函數(shù)中的類型定義來(lái)指定我們需要的提供者。下面是一個(gè)例子：
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'example-component',
template: '<div>I am a component</div>'
})
class ExampleComponent {
constructor(private http: Http) {
// use `this.http` which is the Http provider
}
}這里的類型定義是 Http（注意大寫(xiě)的 H），Angular 會(huì)自動(dòng)將其分配給 http。
瀏覽器中運(yùn)行時(shí)的http參數(shù)
對(duì)于 JavaScript 開(kāi)發(fā)人員來(lái)說(shuō)，上面的工作方式或許有些神奇。類型定義是特定于 TypeScript 的，所以我們編譯的 JavaScript 代碼理論上應(yīng)該不知道在瀏覽器中運(yùn)行它時(shí)我們的 http 參數(shù)是什么。
在我們的 tsconfig.json 文件中，我們將 emitDecoratorMetadata 設(shè)置為 true。 這會(huì)將有關(guān)參數(shù)類型的元數(shù)據(jù)發(fā)送到我們編譯的 JavaScript 輸出中的裝飾器中。
讓我們看看上面列舉的 TypeScript 代碼，實(shí)際上被編譯成什么（為了清楚起見(jiàn)，我保留了 ES6 導(dǎo)入）：
import { Component } from '@angular/core';
import { Http } from '@angular/http';
var ExampleComponent = (function() {
function ExampleComponent(http) {
this.http = http;
}
return ExampleComponent;
})();
ExampleComponent = __decorate(
[
Component({
selector: 'example-component',
template: '<div>I am a component</div>',
}),
__metadata('design:paramtypes', [Http]),
],
ExampleComponent
);從這里，我們可以看到編譯后的代碼，知道 http 就是 @angular/http 提供的 Http 服務(wù) - 它被添加為我們的類的裝飾器：
__metadata('design:paramtypes', [Http]);
所以本質(zhì)上，@Component 裝飾器被轉(zhuǎn)換為普通的 ES5，并且一些額外的元數(shù)據(jù)通過(guò) __decorate 賦值提供。 這反過(guò)來(lái)告訴 Angular 查找 Http 令牌并將其作為第一個(gè)參數(shù)提供給組件的構(gòu)造函數(shù) - 將其分配給 this.http：
function ExampleComponent(http) {
this.http = http;
}以上就是Angular @Injectable 注解的工作原理解析的詳細(xì)內(nèi)容，更多關(guān)于Angular @Injectable注解的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了AngularJS中指令的四種基本形式,結(jié)合實(shí)例形式分析了AngularJS指令的定義、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
這篇文章主要給大家總結(jié)了angular.js中定時(shí)器循環(huán)的3種方法，分別是利用$interlval實(shí)現(xiàn)、$timeout的遞歸調(diào)用來(lái)實(shí)現(xiàn)以及$timeout借助arguments.callee來(lái)實(shí)現(xiàn)，每種方法都給出了詳細(xì)的示例艾瑪供大家學(xué)習(xí)參考，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-04-04
AngularJS ng-bind-html 指令詳解及實(shí)例代碼
本文主要是對(duì)AngularJS ng-bind-html 指令知識(shí)的詳細(xì)講解，并附代碼實(shí)例，有需要的小伙伴可以參考下2016-07-07
Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文通過(guò)示例給大家詳解angularjs 的filter知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-03-03
Angularjs的ng-repeat中去除重復(fù)數(shù)據(jù)的方法
這篇文章主要介紹了Angularjs的ng-repeat中去除重復(fù)數(shù)據(jù)的方法,涉及AngularJS針對(duì)重復(fù)數(shù)據(jù)的遍歷與過(guò)濾技巧,需要的朋友可以參考下2016-08-08
利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)（代碼加簡(jiǎn)單）
這篇文章主要介紹了利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)，利用Angular+Angular-Ui實(shí)現(xiàn)的分頁(yè)分頁(yè)代碼更加簡(jiǎn)單，更加容易懂哦，相信本文的內(nèi)容對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
angular4中*ngFor不能對(duì)返回來(lái)的對(duì)象進(jìn)行循環(huán)的解決方法
今天小編就為大家分享一篇angular4中*ngFor不能對(duì)返回來(lái)的對(duì)象進(jìn)行循環(huán)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
盤(pán)點(diǎn)分析Angular框架那些著名的安全漏洞
這篇文章主要為大家介紹了盤(pán)點(diǎn)分析Angular框架那些著名的安全漏洞,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了淺談Angular6的服務(wù)和依賴注入，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06