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

Language 是一个简单的 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 是另一个组件，它采用语言列表并在选择列表中的一种语言时发出事件。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 需要反射元数据和 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 回答
1

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

如果有人对最初发生错误的原因有解释，我会很高兴听到。

于 2016-06-20T23:45:23.363 回答