javascript - ES5 和 ES6 中的 Angular 2 依赖注入(inject)

Question

这是一个基本的 TypeScript/ES.next 示例，它为 DI 使用装饰器并遵循框架手册建议的语法:

import {Component, Inject, Injectable, NgModule, OpaqueToken} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

const CONSTANT = { value: 'constant' };
const CONSTANT_TOKEN = new OpaqueToken;
const CONSTANT_PROVIDER = { provide: CONSTANT_TOKEN, useValue: CONSTANT };

@Injectable()
class Service {
  constructor(@Inject(CONSTANT_TOKEN) constant) {
    console.log('Service constructor', constant);
  }
}

@Component({
  selector: 'app',
  template: '...',
  providers: [Service, CONSTANT_PROVIDER]
})
class AppComponent {
  constructor(@Inject(Service) service: Service, @Inject(CONSTANT_TOKEN) constant) {
    console.log('AppComponent constructor', service, constant);    
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

用ES5怎么写？

如何在 未转译 ES6/ES2015 中完成同样的事情？

Injectable 和 Inject 装饰器在这些情况下是如何翻译的？

这个问题特别适用于具有类但可能使用 require 或 System.import 而不是 ES6 导入的现实世界 ES6 浏览器实现。

Answer 1

要将 Angular 2 与 ES5 一起使用，您需要此脚本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.3/angular2-all.umd.js"></script>

这提供了一个包含所有 Angular 2 的全局变量。现在你可以写 ng.core.Component而不是 @Component注解。 Constructor 的第一个参数是可注入(inject)物。

var Component = ng.core
  Component({
    selector: 'hello-cmp',
    template: 'Hello World!',
    viewProviders: [Service]
  .Class({
    constructor: [Service, function (service) { 
      ...
    }],
  });

并告诉注入(inject)器我们的服务参数是Service的一个实例

Component.parameters = [[new ng.core.Inject(Service)]];

以下示例显示了 angular2 与 ES6 的用法:

import {Component} from 'angular2/core';
import {Service} from './example.service';

let componentAnnotation = new Component({
  selector: 'world-time',
  inputs: ['timeZones'],
  providers: [Service],
  template: `
    ...
  `
});
export class ComponentExample {
   constructor(service) {
    this._service = service;

   }
...

}

WorldTimeComponent.annotations = [componentAnnotation];
WorldTimeComponent.parameters = [[Service]];

In this plunkr你可以找到一个有效的 ES6 示例。

但是你可以通过 Babel 使用装饰器。启用 optional[]=es7.decorators (在 webpack 中)或通过将配置设置为 stage:1 .