我正在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