Injectable 装饰器特定于 Angular 2 的 TypeScript 风格。它允许通过 TypeScript 类型注释为 DI 隐式注释类构造函数。对于使用Inject 注释的注入依赖项，它在 TS 中是多余的，而在 JS 中则不需要。
Angular 2 可注入对象（类和构造函数）应该在底层使用 annotations 和 parameters 静态属性进行注释。
annotations 是一个数组，其中包含用于可注入类的 newed 装饰器：
function SomeComponent(...) {}
SomeComponent.annotations = [new Componenent(...)];
parameters 是一个数组，其中包含构造函数参数的装饰器，每个元素都是一个数组，其中包含newed 装饰器列表，用于各个构造函数属性（类似于 Angular 1.x 中的$inject 属性显式注释） ：
function Service(someService, anotherService) {}
Service.parameters = [
[new Inject(SomeService)],
[new Inject(AnotherService), new Optional, new SkipSelf]
];
所有类装饰器都是从TypeDecorator 扩展而来的，这意味着它们可以作为函数调用。在这种情况下，使用了所谓的 DSL 语法，它允许使用 Class helper function 链接装饰器：
var SomeComponent = Componenent(...).Class(...);
Class 也可以单独使用，它从给定的definition object 构造一个新类，并允许用数组注释constructor 方法（类似于Angular 1.x 中的内联数组显式注释）：
var SomeService = Class({
constructor: [[new Inject(SomeService)], function (someService) {}]
});
Class helper 在最新的框架版本中已被弃用。它应该被 ES5 中的原始函数或第三方类助手替换。装饰器支持与类函数直接链接，Componenent(...)(ComponentClass)。
Angular 2/4 ES6 和 System.import
example:
Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('@angular/platform-browser-dynamic')
])
.then(([
{Component, Inject, Injectable, Optional, NgModule, OpaqueToken},
{BrowserModule},
{platformBrowserDynamic}
]) => {
const CONSTANT = { value: 'constant' };
const CONSTANT_TOKEN = new OpaqueToken;
const CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };
class Service {
constructor(constant) {}
}
Service.parameters = [[new Inject(CONSTANT_TOKEN)]];
class AppComponent {
constructor(service, constant) {}
}
AppComponent.annotations = [new Component({
selector: 'app',
template: '...',
providers: [Service, CONSTANT_PROVIDER]
})];
AppComponent.parameters = [[new Inject(Service)], [new Inject(CONSTANT_TOKEN)]];
class AppModule {}
AppModule.annotations = [new NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})];
platformBrowserDynamic().bootstrapModule(AppModule);
})
.catch((err) => console.error(err));
带有 UMD 模块和 ng 全局的 Angular 2/4 ES5
example:
var Class = ng.core.Class;
var Component = ng.core.Component;
var Inject = ng.core.Inject;
var Injectable = ng.core.Injectable;
var NgModule = ng.core.NgModule;
var OpaqueToken = ng.core.OpaqueToken;
var BrowserModule = ng.platformBrowser.BrowserModule;
var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
var CONSTANT = { value: 'constant' };
var CONSTANT_TOKEN = new OpaqueToken;
var CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };
// Class helper function that uses A1-flavoured inline array DI annotations
// and creates an annotated constructor
var Service = Class({
constructor: [[new Inject(CONSTANT_TOKEN)], function (constant) {
console.log('Service constructor', constant);
}]
});
// can also be
// function Service(constant) {};
// Service.parameters = [[new Inject(...)], ...];
// when not being `new`ed, Component is a chainable factory that has Class helper method
var AppComponent = Component({
selector: 'app',
template: '...',
providers: [Service, CONSTANT_PROVIDER]
})
.Class({
constructor: [
[new Inject(Service)],
[new Inject(CONSTANT_TOKEN)],
function (service, constant) {
console.log('AppComponent constructor', service, constant);
}
]
});
// can also be
// function AppComponent(...) {};
// AppComponent.annotations = [new Component(...)];
// AppComponent.parameters = [[new Inject(...)], ...];
var AppModule = NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
.Class({ constructor: function () {} });
// can also be
// function AppModule() {};
// AppModule.annotations = [new NgModule(...)];
platformBrowserDynamic().bootstrapModule(AppModule);