サービスの提供元がありません

Question

私は2.0.0-beta.17を使用してangular2を取得しようとしています。

No provider for LanguageBrowser! 

私はここに同じ質問の数十を経たが、それらのどれも働いていない：私は関係なく、私は例外を取得んどのサービスからデータを読みたいんけど。

これは私のサービスクラスです：

import {Injectable} from "angular2/core"; 
import {Language} from "../models/language.model"; 

@Injectable() 
export class LanguageService { 
    ReadAll(onNext: (json: any) => void) { 
     return [ 
      new Language({ Id: 1, Name: "German" }), 
      new Language({ Id: 2, Name: "English" }), 
      new Language({ Id: 3, Name: "Dutch" }) 
     ]; 
    } 
} 

言語は、最終的にはWebサービスの呼び出しから取得されることになっているシンプルなtypescriptですクラス、ですが、私はそこまでではありませんよ。

export class Language { 
    public Id: number; 
    public Name: string; 

    constructor(json: any) { 
     if (json) { 
      this.Id = json.Id || 0; 
      this.Name = json.Name || ""; 
     } 
    } 
} 

LanguageServiceがLanguageBrowser成分

import {Component} from "angular2/core" 
import {Language} from "../models/language.model" 
import {LanguageDetail} from "./language-detail.component" 
import {LanguageCollection} from "./language-collection.component" 
import {LanguageService} from "../services/language.service" 

@Component({ 
    selector: "language-browser", 
    template: ` 
     <language-collection [languages]="availableLanguages" (selectionChanged)="onSelectionChanged($event)"></language-collection> 
     <language-detail [language]="selectedLanguage"></language-detail> 
    ` 
    providers: [LanguageService], 
    directives: [LanguageCollection, LanguageDetail] 
}) 
export class LanguageBrowser { 
    private selectedLanguage: Language; 
    private availableLanguages: Language[]; 

    constructor(languageService: LanguageService) { 
     languageService.ReadAll(json => this.availableLanguages = json); 
    } 

    onSelectionChanged(language) { 
     this.selectedLanguage = language; 
    } 
} 

LanguageCollectionによって消費される言語のリストを取得し、リスト中の言語のいずれかを選択すると、イベントを発する別のコンポーネントです。 LanguageDetailは選択した言語のみを表示します。彼らはどちらも無関係です（私は仮定します）ので、ここでは除外します。

別の回答として、スクリプトには含まれているものの、役に立たないものとしてsystem-polyfills.jsとes6-shim.jsを追加しました。これは私のレイアウトの関連する部分である：

<script src="~/js/jquery.js"></script> 
<script src="~/js/bootstrap.js"></script> 
<script src="~/js/system.js"></script> 
<script src="~/js/system-polyfills.js"></script> 
<script src="~/js/rx.js"></script> 
<script src="~/js/typescript.js"></script> 
<script src="~/js/es6-shim.js"></script> 
<script src="~/js/angular2/angular2-polyfills.js"></script> 
<script src="~/js/angular2/angular2.dev.js"></script> 
<script src="~/js/angular2/http.dev.js"></script> 
<script src="~/js/angular2/router.dev.js"></script> 

<script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('app/boot'); 
</script> 

ブートは、単にこのように見えるでは：私のpackage.jsonで

import {Component} from "angular2/core"; 
import {LanguageBrowser} from "./components/language-browser.component"; 

@Component({ 
    selector: "app", 
    template: ` 
     <language-browser></language-browser> 
    `, 
    directives: [LanguageBrowser] 
}) 

export class AppComponent { 
    public LanguageBrowser: LanguageBrowser; 

    constructor(languageBrowser: LanguageBrowser) { 
     this.LanguageBrowser = languageBrowser; 
    } 
} 

依存関係：このような

import {bootstrap} from "angular2/platform/browser" 
import {AppComponent} from "./app.component" 
import "rxjs/add/operator/map"; 

bootstrap(AppComponent); 

とAppComponent：

"dependencies": { 
    "angular2": "2.0.0-beta.17", 
    "bootstrap": "3.3.6", 
    "es6-promise": "3.2.1", 
    "es6-shim": "0.35.1", 
    "jquery": "2.2.4", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.30", 
    "typescript": "1.8.10", 
    "zone.js": "0.6.12" 
    }, 
    "devDependencies": { 
    "gulp": "3.9.1", 
    "del": "2.2.0" 
    }, 
    "peerDependencies": { 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.6" 
    } 

npm ins tallationは私にangle2が私に言ったのは、reflect-metadataとrxjsのpeerDependenciesです。私は単純にpeerDependenciesとしてそれらを含めました。私はまた、変化のない定期的な依存としてそれらを持っていました。

明らかに私は何かが不足していますが、それが何であるかを知ることができません。 angular2のチュートリアルをいくつか行ってきましたが、そのうちのどれもそのトリックを行っていませんでした。

Answer 1

使用ViewChild：

@Component({ 
    selector: "app", 
    template: ` 
     <language-browser></language-browser> 
    `, 
    directives: [LanguageBrowser] 
}) 

export class AppComponent { 
    @ViewChild(LanguageBrowser) lb:LanguageBrowser; 

    constructor() {} 
    ngAfterViewInit() { 
     let yey = this.lb.availableLanguages; 
    } 
} 

また、コンストラクタで何もしてないようlifecycle hooksを学び、代わりにそれらを使用してみてください。

Answer 2

ライフサイクルフックと彼のリンクを学ぶためのSasxaの提案後、私は実際に解決策を考え出すことができました。私はこれを行うための半ダースの簡単な方法があると確信していますが、コンストラクタにLanguageServiceを注入する以外に、サービスオブジェクトを手に入れる方法を見つけることができません。

import {Component, OnInit, ReflectiveInjector} from "angular2/core" 
import {Language} from "../models/language.model" 
import {LanguageDetail} from "./language-detail.component" 
import {LanguageCollection} from "./language-collection.component" 
import {LanguageService} from "../services/language.service" 

@Component({ 
    selector: "language-browser", 
    templateUrl: "./app/views/language-browser.html", 
    providers: [LanguageService], 
    directives: [LanguageCollection, LanguageDetail] 
}) 
export class LanguageBrowser implements OnInit { 
    private selectedLanguage: Language; 
    private availableLanguages: Language[]; 

    ngOnInit() { 
     var injector: ReflectiveInjector = ReflectiveInjector.resolveAndCreate([LanguageService]); 
     var languageService: LanguageService = injector.get(LanguageService); 

     this.availableLanguages = languageService.ReadAll(); 
    } 

    onSelectionChanged(language) { 
     this.selectedLanguage = language; 
    } 
} 

誰でもエラーが最初に私はそれを聞いて喜んでいると思い発生​​した理由を説明している場合：

とにかく、これは私が今やっているものです。