Question

我正在关注this教程。而且我被困住了。即使我复制了确切的代码，它也不会做它应该做的事情。也许它是基于一些较旧的测试版？或许我忽视了一些事情。

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

我需要将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]
    };
}

Angular2依赖注入不像官方教程中描述的那样工作

2 个答案: