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

How to use Angular2 dependency injection with javascript decorators?

本文关键字：一起 javascript Angular2 依赖 注入      更新时间：2023-09-26

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

constructor(@Inject(TodoStore) store)

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

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

我的问题是，在有效的ES6/ES7中有没有一种方法可以使用decorator来注入依赖项？

实际上，您不需要使用@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;
  }
  (...)
}

希望它能帮助你，Thierry

试试这个：

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)];
相关文章：