Angular2 依赖注入无法按照官方教程中的描述工作

Question

我正在学习本教程。我被困住了。即使我复制了确切的代码，它也不会做它应该做的事情。也许它基于一些较旧的测试版？或者也许我忽略了什么。

您可以在页面底部看到完整的来源，我将在这里复制粘贴最重要的部分。

我需要将 HeroService 注入 AppComponent。但是自动注射不会发生。请参阅代码最后一行的注释。

服务内容：

import { Injectable } from 'angular2/core';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
    getHeroes() {
        return HEROES;
    }
}

该组件：

import { Component, OnInit } from 'angular2/core';
import { HeroService } from './hero.service';
@Component({
    selector: 'my-app',
    template: ` .... snip ....`,
    styles: [` .... snip ....`],
    directives: [HeroDetailComponent],
    providers: [HeroService]
})
export class AppComponent implements OnInit {   
    constructor(private heroService: HeroService) {
        alert(heroService); //!!!!! This is undefined
        alert(this.heroService); //!!!!! This is undefined as well
    };
}

本教程指出，如果我省略提供程序部分，则会出现错误。但实际上并非如此，即使我将其注释掉，它的行为也是一样的。

我的 Angular2 版本是 2.0.0-beta.17

Answer 1

尝试以下操作：

export class AppComponent implements OnInit {   
  constructor(private heroService: HeroService) {
    alert(this.heroService); // <------
  }
}

话虽如此，两者都应该有效。它实际上适用于 RC1 的我。请看这个 plunkr： https://plnkr.co/edit/lG5DAd6ceLOIiT5WvYHI?p=preview。

Answer 2

这个问题是由我的 Angular2 版本引起的，它是 beta 17。JSPM 不允许我安装更高版本（此自动注入显然需要 RC 1）。

我的临时解决方法是将组件更改为：

import { Component, OnInit, Inject } from 'angular2/core';
import { HeroService } from './hero.service';
@Component({
    selector: 'my-app',
    template: ` .... snip ....`,
    styles: [` .... snip ....`],
    directives: [HeroDetailComponent],
    providers: [HeroService]
})
export class AppComponent implements OnInit {   
    constructor(@Inject(HeroService) private heroService: HeroService) { //<---- the change
        alert(heroService); //[Object object]
    };
}