如何将 Angular2 依赖注入与 javascript 装饰器一起使用？答案

【问题标题】：How to use Angular2 dependency injection with javascript decorators?如何将 Angular2 依赖注入与 javascript 装饰器一起使用？
【发布时间】：2016-04-04 04:20:21
【问题描述】：

我尝试将服务 (TodoStore) 注入到我的组件 (TodoList) 中，但装饰器失败了。它工作的唯一方法是使用构造函数参数装饰器

constructor(@Inject(TodoStore) store)

据我所知，这不是有效的 ES7。我试图将注入放在类之前或构造函数之前，这两种方法都不适用于 Webpack。我目前最符合标准的解决方案是

static get parameters() {
  return [[TodoStore]];
}

我的问题是有效的 ES6/ES7 中的装饰器有办法注入依赖项吗？

【问题讨论】：

目前最方便的方法是使用静态getter
没有 ES6 和 ES7 的标签吗？如果没有，应该有人创建它们。

标签： javascript dependency-injection angular ecmascript-6

【解决方案1】：

其实你不需要使用@Inject注解。您的服务需要有一个@Injectable 注释。

import {Injectable} from 'angular2/core';

@Injectable()
export class TodoStore {
  (...)
}

为了能够将其注入到您的组件中，只需将其添加到其构造函数的参数中并添加到它的提供者列表中：

import {TodoStore} from './todoStore';

@Component({
  selector: 'todo-list',
  providers: [ TodoStore ],
  template: `
    (...)
  `
})
export class TodoListComponent {
  constructor(service:TodoStore) {
    this.service = service;
  }
  (...)
}

希望对你有帮助蒂埃里

【讨论】：

它已经是一个\@Component，它是\@Injectable。您建议的构造函数是特定于 Typescript 的。

【解决方案2】：

试试这个：

import {Component, Inject} from 'angular2/core';
import {TodoStore} from './todoStore';

@Component(...)
export class TodoListComponent {
  constructor(service) {
    this.service = service;
  }
  ...
}

// Workaround for parameter annotations
TodoListComponent.parameters = [new Inject(TodoStore)];

【讨论】：

从技术上讲，它与静态 getter 相同，只是在声明之外。
这几乎是准确的，唯一的区别是您根本不需要使用 Inject。如果您只是将 World 类放入参数中，那么注入器将负责为您实例化它。