Angular 2 服务依赖注入失败（使用angular-cli 和$ng serve）

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'},
      }
  }

}

我还将 CatalogService 放在 main.ts 文件的 boostrap 函数中。

这是我在命令行中从运行ning 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

您的代码中有两个错误：

来源-display.component.spec.ts :

你这个文件中的参数无效，所以我建议你评论这个文件中的所有代码。

来源-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
    }

}

希望对您有所帮助。

Angular 2 服务依赖注入失败（使用angular-cli 和$ng serve）

Angular 2 service dependency injection fails (using angular-cli and $ng serve)

angular

angular2-services

angular-cli