Javascript Angular 2无提供程序错误

我正在创建一个简单的入门应用程序来使用angular 2，我正在尝试创建一个todo服务，并将其注入到我的组件中，我发现以下错误：

没有TodoService的提供程序！（TodoList->TodoService）

TodoService.ts

export class TodoService {
 todos: Array<Object>
 constructor() {
   this.todos = [];
 }
}

将类导出到服务{
todos:数组
构造函数（）{
this.todos=[]；
}
}

app.ts

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, For, If} from 'angular2/angular2';
import {TodoService} from './TodoService'

@Component({
  selector: 'my-app'
})

@View({
  templateUrl: 'app.html',
  directives: [For, If],
  injectables: [TodoService]
})

class TodoList {
 todos: Array<Object>
  constructor(t: TodoService) {
    this.todos = t.todos
  }

  addTodo(todo) {
    this.todos.push({
      done:false,
      todo: todo.value
    });
  }
}

bootstrap(TodoList);

//
从'angular2/angular2'导入{Component，View，bootstrap，For，If}；
从“./TodoService”导入{TodoService}
@组成部分({
选择器：“我的应用程序”
})
@看法({
templateUrl:'app.html'，
指令：[用于，如果]，
注射剂：[TodoService]
})
托多利斯特阶级{
todos:数组
构造函数（t:TodoService）{
this.todos=t.todos
}
添加todo（todo）{
这个。待办事项。推({
完成：错误，
todo:todo.value
});
}
}
bootstrap（TodoList）；

---

问题出在哪里？

可注射药物在

@组件上指定

而不是在

@视图上指定

你有：

@Component({
  selector: 'my-app'
})

@View({
  templateUrl: 'app.html',
  directives: [For, If],
  injectables: [TodoService]  // moving this line
})

将其更改为：

@Component({
  selector: 'my-app',
  injectables: [TodoService]  // to here
})

@View({
  templateUrl: 'app.html',
  directives: [For, If]
})

---

这将允许DI拾取它并将其注入组件。

在最新的Angular版本中，您必须使用提供程序而不是注入程序，例如：

@Component({
    selector: 'my-app',
    providers: [TodoService]
})

---

谢谢你。我也在做同样的事情。然而，我的应用程序在“injectables:”行中崩溃了。由于TodoService尚未加载，因此将稍后加载。。如果我在同一个文件中声明它，那没问题，但是如果它在另一个文件中，那就晚一点。如何避免这种情况？您可能可以在构造函数中使用@InjectPromise；请参见angular2.src.di.annotations\u检查此答案以了解更新的角度