Angular 2 依赖注入：无法解析所有参数（没有 dep 链，没有桶）

Question

我一直在尝试按照 ng-book 2 中的一个示例和运行进入 DI 章节中的困难。

@Component({
    selector: 'app-root',
    template: `
        <button (click)="invokeService()">Get Value</button>
    `
})
export class AppComponent {
    constructor(public myService: MyService) {}

    invokeService() {
        console.log(this.myService.getValue());
    }
}
@Injectable()
export class MyService {
    getValue(): string {
        return 'a value';
    }
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里有一个 plunker https://plnkr.co/edit/KSXE9tnRj4tffiISyp0i 它在手动创建 ReflectiveInjector 时完全有效，但是当我尝试采用简单的方法并在 NgModule 的提供程序中声明它时，它无法给我 "Can't resolve all dependencies for AppComponent"。我检查了其他答案，如您所见，没有循环依赖或与桶相关的问题——它们都在一个文件中。任何提示将不胜感激！

Answer 1

如果您将多个类放在一个文件中（我确定这仅用于测试），则必须检查文件的顺序。假设您的 AppComponent 引用了您的 MyService，因此 MyService 的定义必须放在 AppComponent 之上。因此，您的代码必须如下所示：

import { Component, ReflectiveInjector, Injectable, Inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@Injectable()
export class MyService {
    constructor() {}

    getValue(): string {
        return 'a value';
    }
}

@Component({
    selector: 'app-root',
    template: `
    <button (click)="invokeService()">Get Value</button>
    `
})
export class AppComponent {
    // private myService: MyService;

    constructor(public myService: MyService) {
        // let injector: any = ReflectiveInjector.resolveAndCreate([MyService]);
        // this.myService = injector.get(MyService);
        // console.log('Same instance? ', this.myService === injector.get(MyService));
    }

    invokeService() {
        console.log(this.myService.getValue());
    }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 2 依赖注入：无法解析所有参数（没有 dep 链，没有桶）

Angular 2 Dependency Injection: Can't resolve all parameters (no dep chain, no barrel)

angular

typescript

dependency-injection

angular2-services

angular2-di