angularjs 2.0：無法通過組件構造函數注入任何東西（）

我在angularjs 2.0中創建一個示例應用程序。在開發過程中，我遇到了一個嚴重的問題 - 我無法通過構造函數向組件注入任何東西。angularjs 2.0：無法通過組件構造函數注入任何東西（）

這是plnkr網址：https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK?p=preview

我用下面的代碼用於從app.item.service.ts

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

導入ItemService然後我指定的提供者作爲

@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的所有參數：（？）。」我甚至無法注入像注射器這樣的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" 
    }

角版本：2.0。 0 final
瀏覽器：全部

附上我從控制檯得到的錯誤日誌：

(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

來源

2016-09-20 Sreejith M Sreedharan

難道您發佈'tsconfig.json'？ – yurzui

你在app.item.service中有'@Injectable（）'嗎？ TS？ –

@JohnSiu：是的，我有。順便說一句，這是plnkr網址https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK?p=preview –

我看你的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。該選項將保留對象元數據中的類型信息。

又見

來源

2016-09-21 05:56:13 yurzui

：這樣做的魔力！謝謝...現在它正在工作.. –

你的代碼很好！

這是你更新plunker：https://plnkr.co/edit/6SR8Ibljuy0ElEBU87ox?p=preview

做了一些改變你system.js.config！

// ADDED THESE TWO OPTIONS BELOW 

    //use typescript for compilation 
    transpiler: 'typescript', 
    //typescript compiler options 
    typescriptOptions: { 
     emitDecoratorMetadata: true 
    },

這..

app: { 
    main: './main.ts',  // CHANGES HERE 
    defaultExtension: 'ts' // CHANGES HERE 
},

來源

2016-09-21 05:54:12 mxii

嘿，謝謝！我們也可以在tsconfig.json中更新「emitDecoratorMetadata」。我做到了，它完美的工作！ –

angularjs 2.0：無法通過組件構造函數注入任何東西（）

回答

相關問題