Angular 2服务未注入组件

Question

我在Angular2（2.0.0-beta.0）应用程序中定义了一个服务。它是这样的：

import {Injectable} from "angular2/core";
@Injectable()
export class MyService {
    constructor() {
    }
    getSomething() {
        return 'something';
    }
}

我在我的主应用程序文件的bootstrap（）函数中列出了它，这样它就可以用于我的代码：

bootstrap(App, [MyService, SomeOtherService, ROUTER_DIRECTIVES[);

有时我不能在组件中使用服务，即使我在组件constructor()函数中有类似myService:MyService的东西，比如：

import {MyService} from '../services/my.service';
@Component({
    selector: 'my-component',
    directives: [],
    providers: [],
    pipes: [],
    template: `
    <div><button (click)="doStuff()">Click Me!</button></div>
    `
})
export MyComponent {
    constructor(myService:MyService) {} // note the private keyword
    doStuff() {
        return this.myService.getSomething();
    }
}

在其他地方，它运行良好。在它不起作用的地方，我会收到一条消息，比如如果我试图访问它：

EXCEPTION: TypeError: Cannot read property 'getSomething' of undefined

这基本上意味着服务没有被注入。

是什么原因导致它没有被注射？

Answer 1

这种行为完全正常。

在组件的构造函数方法中，当您不添加private或public关键字时，myService[/strong>变量将被评估为局部变量，因此它在方法调用结束时被销毁。

当您添加private或public关键字时，TypeScript会将变量添加到类属性中，因此您以后可以使用this//strong>关键字调用属性。

constructor(myService: MyService) {
  alert(myService.getSomething());
  // This will works because 'myService', is declared as an argument
  // of the 'constructor' method.
}
doStuff() {
  return (this.myService.getSomething());
  // This will not works because 'myService' variable is a local variable
  // of the 'constructor' method, so it's not defined here.
}

Answer 2

问题是，除非在构造函数中将注入的对象标记为private或public，否则依赖项注入似乎无法工作。

在组件的构造函数中，在服务注入之前添加这两件事中的任何一件都可以使其正常工作：

import {MyService} from '../services/my.service';
@Component({
    selector: 'my-component',
    directives: [],
    providers: [],
    pipes: [],
    template: `
    <div><button (click)="doStuff()">Click Me!</button></div>
    `
})
export MyComponent {
    constructor(private myService:MyService) {} // note the private keyword
    doStuff() {
        return this.myService.getSomething();
    }
}