Angular 2サービス依存性注入が失敗しました（Angle-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を入れています。ここで

は、私は（angular-cliから）コマンドラインでng serveを実行しているから取得するエラーメッセージです：

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を実行し、セクションをアンコメントし、今はリフレッシュするアプリが、私はそれがしたいように動作します。

私はこれを解決するために何をしなければならないのか分かりません。何か案は？依存関係注入自体に問題はありますか？あるいは、この角度-cliコマンドを使用するだけで他に何か問題がありますか？ng serve？

Answer 1

あなたのコード内の2個のエラーがあります

1. ソース-display.component.spec.ts：あなたのこのファイルの

   引数が有効ではありませんので、私はあなたを提案しますこのファイルのすべてのコードをコメントしてください。

2. ソース-display.component.ts：あなたは間違った方法でサービスを注入している

   、理想的な構文は次のようになります。

   constructor(private catalogService: CatalogService)を宣言

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

に相当します。

export class SourceDisplayComponent { 
    private catalogService; 

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

} 

希望役に立った