Question

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

EXCEPTION：错误：未捕获（在承诺中）：无法解析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”中的“employee-list.component.ts”来明确注入服务。我已经尝试过你和它的工作提供的plunker。

在您的情况下，您需要在Inject中进行更改。从@angular/core导入constructor(@Inject(EmployeeService) private employeeService: EmployeeService){}并在构造函数中明确注入您的服务，如：

Code coverage

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

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;
}

第三步：

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

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

为什么Angular2无法注入我的服务？

2 个答案: