0

私は ng-book 2 の 1 つの例に従おうとしてきましたが、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 { }

ここにプランカーがあります https://plnkr.co/edit/KSXE9tnRj4tffiISyp0i ReflectiveInjector を手動で作成すると完全に機能しますが、簡単な方法で NgModule のプロバイダーで宣言しようとすると失敗し、「すべてを解決できません」というエラーが表示されますAppComponent の依存関係」。他の回答を確認しましたが、ご覧のとおり、循環 deps やバレル関連の問題はありません。すべて 1 つのファイルにあります。ヒントをいただければ幸いです。

4

1 に答える 1

1

1 つのファイルに複数のクラスを配置する場合 (これはテスト専用であることは確かです)、ファイルの順序を確認する必要があります。your が yourAppComponentを参照しているとします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 { }
于 2016-12-20T22:58:30.090 に答える