Angular 2服务依赖注入失败(使用angular-cli和$ ng服务)

时间:2016-07-21 19:32:17

标签: angular angular2-services angular-cli

我在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函数中。

以下是我在命令行中运行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

1 个答案:

答案 0 :(得分:2)

您的代码中有两个错误:

  1. source-display.component.spec.ts

    此文件中的参数无效,因此我建议您对此文件中的所有代码进行评论。

  2. <强>源display.component.ts

    您正在以错误的方式注入服务,理想的语法应该是:

    constructor(private catalogService: CatalogService) {
       this.active_source_id = 1;
       this.sources = this.catalogService.getCatalog();
    }
    
  3. 声明constructor(private catalogService: CatalogService)相当于:

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

    希望这有帮助。