如何使用javascript裝飾器進行Angular2依賴注入？

Question

我試圖將一個服務（TodoStore）注入我的組件（TodoList）但是沒有裝飾器。 它的唯一工作方式是使用構造函數參數裝飾器

constructor(@Inject(TodoStore) store)

據我所知，這不是有效的ES7。 我試圖在類之前或構造函數之前放入注入，既不能用於Webpack。 我目前最符合標准的解決方案是

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

我的問題是有效的ES6 / ES7裝飾器注入依賴關系嗎？

Answer 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;
  }
  (...)
}

希望它對你有幫助，蒂埃里

Answer 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)];