0

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" })
        ];
    }
}

言語は単純な typescript クラスであり、最終的に Web サービス呼び出しから取得されることになっていますが、私はそれほど遠くありません。

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 は、言語のリストを取得し、リスト内の言語の 1 つを選択するとイベントを発行する別のコンポーネントです。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>

ブートすると、次のようになります。

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

bootstrap(AppComponent);

そして AppComponent は次のようになります:

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;
    }
}

私のpackage.jsonの依存関係:

"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 のインストールで、angular2 が Reflect-metadata と rxjs の peerDependencies を必要としていると言われたので、単純にそれらを peerDependencies として含めました。また、変更なしで通常の依存関係としてそれらを持っていました。

明らかに何かが欠けていますが、それが何であるかを見つけることができません。angular2 のいくつかのチュートリアルを実行しましたが、どれもうまくいきませんでした。

4

2 に答える 2

3

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;
    }
}

また、コンストラクターで何もしないようにして、ライフサイクル フックを学習し、代わりにそれらを使用してください。

于 2016-06-19T23:03:29.737 に答える