angularjs 2.0：无法通过组件构造函数()注入任何内容

我正在angularjs 2.0中创建一个示例应用程序.在开发过程中,我遇到了一个严重的问题 – 我无法通过构造函数向组件注入任何东西.

这是plnkr url：https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK?p=preview

我使用以下代码从app.item.service.ts导入ItemService

import { ItemService } from './app.item.service';

然后我指定提供者为

@Component({
  selector: 'list-todo',template: `
    <ul>
    <li *ngFor="let item of items">{{item.text}}</li>
    </ul> 
  `,providers : [ItemService]
})

之后,给TodoComponent的代码为

export class TodoComponent implements OnInit {
  items:Array<Object> = [];
  constructor(private itemService: ItemService){  //here is the problem
   }

  ngOnInit(){
    this.getItems();
  }
  getItems(){
    this.items = this.itemService.getItems();
  }
}

当我尝试通过构造函数注入ItemService时,我收到一个错误：“错误：无法解析TodoComponent的所有参数:(？).”
我甚至无法注入像Injector这样的angularjs提供者.

但是,这种方法适合我：

const injector =  ReflectiveInjector.resolveAndCreate([ItemService]);
this.itemService = injector.get(ItemService);

我正在使用我的package.json中提到的以下版本的库进行开发

"dependencies": {
    "@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/router": "3.0.0","@angular/upgrade": "2.0.0","core-js": "^2.4.1","reflect-Metadata": "^0.1.3","rxjs": "5.0.0-beta.12","systemjs": "0.19.27","zone.js": "^0.6.23","angular2-in-memory-web-api": "0.0.20","bootstrap": "^3.3.6"
  },"devDependencies": {
    "concurrently": "^2.2.0","lite-server": "^2.2.2","typescript": "^2.0.2","typings":"^1.3.2"
  }

> Angular版本：最终2.0.0
>浏览器：全部

附上我从控制台得到的错误日志：

(index):16 Error: Error: Can't resolve all parameters for TodoComponent: (?).
        at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14404:21)
        at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14301:28)
        at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14074:30)
        at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14167:51)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14161:51)
        at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16803:49)
        at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16741:39)
        at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16732:23)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6954:29)
    Evaluating http://localhost:3000/dist/main.js
    Error loading http://localhost:3000/dist/main.js(anonymous function) @ (index):16ZoneDelegate.invoke @ zone.js:203Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308

我看到你的tsconfig.json不正确.

{ 
  "compilerOptions": { 
    "target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": false,"emitDecoratorMetadata": true,<== it should be true 
    "experimentalDecorators": true,"removeComments": false,"noImplicitAny": false,"outDir": "dist" 
  } 
}

这是DI的神奇酱油. emitDecoratorMetadata：true.此选项将保留对象元数据中的类型信息.

也可以看看

> How does the TypeScript Angular DI magic work?
> Injecting services in services in Angular 2

angularjs 2.0：无法通过组件构造函数()注入任何内容

猜你在找的Angularjs相关文章