为什么 Angular2 不能注入我的服务？

Question

我正在编写 plnkr 来测试一些路由问题，突然弹出此错误消息，并且无论我在代码中更改什么都不会消失：

EXCEPTION: Error: Uncaught (in promise): Can't resolve all parameters for EmployeeListComponent: (?).

这是代码的相关部分：

export class EmployeeListComponent {
  employees: Employee[];
  constructor(private _employeeService: EmployeeService) {
    _employeeService.getAll().subscribe(employees =>
      this.employees = employees);
  }
}

看来Angular是无法解析EmployeeService的，对吧？我在上面的代码片段中注释掉了它，果然没有错误。

我是不是忘记在 main.ts 或 app.component.ts 内注册了？不，

import {
  Component
} from '@angular/core';

import { 
    ROUTER_DIRECTIVES
} from '@angular/router';

import {
  EmployeeService
} from './employee.service';


@Component({
  selector: 'plk-app',
  template: '<router-outlet></router-outlet>',
  directives: [ 
    ROUTER_DIRECTIVES
  ],
  providers: [
    EmployeeService
  ]
})
export class AppComponent {

}

我应该在 main.ts 中注册吗？好吧，当那个错误第一次出现时我遇到了，然后我将其移至 app.component.ts 以检查是否可以修复它，但没有。

目前我只见树木不见森林，Angular 的错误消息也没有真正帮助（他们从来没有帮助过）。这里有人可以发现问题吗？可以找到 plnkr here.

Answer 1

在访问了几个问题后，我才知道这个问题的发生是因为没有 TypeScript 编译器。如果您不使用 typescript 编译器，则需要使用来自“@angular/core”的“Inject”显式注入服务。我已经在你提供的 plunker 中试过了，它的工作原理。

在您的情况下，您需要在 employee-list.component.ts 中进行更改。从 @angular/core 导入 Inject 并在构造函数中显式注入您的服务，如：

constructor(@Inject(EmployeeService) private employeeService: EmployeeService){}

如果您觉得解决方案对您有帮助，请随时提出任何问题并接受我的回答。

Answer 2

这里是working plunker

第一步：

system.js.config

var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true,
      emitDecoratorMetadata: true <== add this line
    },

第二步：

employee.model.ts 现在看起来像：

export class Employee {
  id: number;
  name: string;
}

第三步：

从 EmployeeListComponent 的模板中删除 async 管道。应该是：

<li *ngFor="let employee of employees">
  ...
</li>

为什么 Angular2 不能注入我的服务？

Why can't Angular2 inject my service?

angular

angular2-services