ES5和ES6中的Angular 2依赖注入

ES5和ES6中的Angular 2依赖注入

Injectable

装饰器特定于Angular2的Typescript风格。它使类构造函数可以通过Typescript类型注释为DI隐式注释。在TS中是多余的，在JS中对于用注释的注入依赖项则不需要

Inject

。

Angular 2注入对象（类和构造函数）应该在引擎盖下带有

annotations

，

parameters

静态属性进行注释。

annotations

是一个数组，其中包含

new

用于可注入类的ed装饰器：

function SomeComponent(...) {}SomeComponent.annotations = [new Componenent(...)];

parameters

是一个包含用于构造函数参数的修饰符的数组，每个元素是一个包含

new

用于相应构造函数属性的ed装饰符列表的数组（类似于

$inject

Angular1.x中的属性显式注释）：

function Service(someService, anotherService) {}Service.parameters = [  [new Inject(SomeService)],  [new Inject(AnotherService), new Optional, new SkipSelf]];

所有类装饰器都从扩展

TypeDecorator

，意味着它们可以被称为函数。在这种情况下，使用所谓的DSL语法，该语法允许将装饰器与

Class

辅助函数链接在一起：

var SomeComponent = Componenent(...).Class(...);

Class

也可以单独使用，它从给定的定义对象构造一个新类，并允许

constructor

使用数组对方法进行注释（类似于Angular 1.x中的内联数组显式注释）：

var SomeService = Class({  constructor: [[new Inject(SomeService)], function (someService) {}]});

Class

在最新的框架版本中不推荐使用helper。应该在ES5中将其替换为原始函数或第三方类帮助器。装饰器支持与类函数直接链接

Componenent(...)(ComponentClass)

。

Angular 2/4 ES6与

System.import

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

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 constructorvar 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 methodvar 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);