Angular 2服務依賴注入失敗（使用angular-cli和$ ng服務）

Question

我在Angular 2中使用依賴注入來向組件注入服務。下面的代碼：

./app/source-display/source-display.component.ts：

import { Component, OnInit } from '@angular/core'; 
import { CatalogService } from '../catalog.service'; 


@Component({ 
    moduleId: module.id, 
    selector: 'app-source-display', 
    providers: [CatalogService], 
    templateUrl: 'source-display.component.html', 
    styleUrls: ['source-display.component.css'] 
}) 
export class SourceDisplayComponent implements OnInit { 
    active_source_id: number; 
    sources: any; 

    constructor(catalogService: CatalogService) { 
     this.active_source_id = 1; 
     this.sources = catalogService.getCatalog(); 
    } 

    ngOnInit() { 
    // active_source_id = 0; 
    } 

} 

./app/catalog.service.ts：

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

@Injectable() 
export class CatalogService { 

    constructor() {} 

    getCatalog() { 
     return { 
      0: {name: 'Source 0'}, 
      1: {name: 'Source 1'}, 
     } 
    } 

} 

我也把我在我的main.ts文件中的自舉功能CatalogService。

以下是錯誤信息，我從在命令行運行ng serve（從angular-cli）獲得：

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: 
Error: Typescript found the following errors: 
    C:/Users/arjun_000/github/slippy-astro-images/ng2-catdisplay/tmp/broccoli_type_script_compiler-input_base_path-soAy8zVZ.tmp/0/src/app/source-display/source-display.component.spec.ts (10, 21): Supplied parameters do not match any signature of call target. 
    C:/Users/arjun_000/github/slippy-astro-images/ng2-catdisplay/tmp/broccoli_type_script_compiler-input_base_path-soAy8zVZ.tmp/0/src/app/source-display/source-display.component.ts (18, 12): Property '_catalogService' does not exist on type 'SourceDisplayComponent'. 
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19) 
    at BroccoliTypeScriptCompiler.build (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10) 
    at C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21 
    at lib$rsvp$$internal$$tryCatch (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17) 
    at lib$rsvp$$internal$$publish (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11) 
    at lib$rsvp$asap$$flush (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9) 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-plugin\index.js:10:31) 
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10) 
    at BroccoliTypeScriptCompiler (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:5) 
    at Angular2App._getTsTree (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18) 
    at Angular2App._buildTree (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23) 
    at new Angular2App (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23) 
    at module.exports (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\angular-cli-build.js:10:10) 
    at Class.module.exports.Task.extend.setupBroccoliBuilder (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19) 
    at Class.module.exports.Task.extend.init (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10) 
    at new Class (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12) 
    at Class.module.exports.Task.extend.run (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19) 
    at C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\commands\serve.js:64:24 
    at lib$rsvp$$internal$$tryCatch (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17) 
    at lib$rsvp$$internal$$publish (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11) 
    at lib$rsvp$asap$$flush (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9) 

我注意到一些奇怪的事情：該代碼不作爲是工作，但如果我的評論出從組件本節 -

constructor(catalogService: CatalogService) { 
     this.active_source_id = 1; 
     this.sources = catalogService.getCatalog(); 
    } 

- 然後運行ng serve（成功地構建應用程序），然後取消註釋掉的部分，應用程序現在刷新工作我想它的方式。

我不知道我要做些什麼來解決這個問題。有任何想法嗎？有沒有我的依賴注入本身的問題，還是有一些其他問題，只是它與這個angular-cli命令ng serve使用？

Answer 1

有兩個錯誤在你的代碼：

1. 源display.component.spec.ts：在這個文件

   參數是無效的，所以我會建議你評論此文件中的所有代碼。

2. 源display.component.ts：

   你正在一個錯誤的方式注射服務，理想的語法應爲：

   constructor(private catalogService: CatalogService) { 
       this.active_source_id = 1; 
       this.sources = this.catalogService.getCatalog(); 
   } 
   

聲明constructor(private catalogService: CatalogService)相當於：

export class SourceDisplayComponent { 
    private catalogService; 

    constructor(catalogService: CatalogService) { 
     this.catalogService=catalogService; //initialising instance variable with dynamically injected instance 
    } 

} 

Hope th是有幫助的。