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。

，否则依赖注入似乎不起作用

在我组件的构造函数中的服务注入前添加这两个东西中的任何一个使其工作正常：

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

Answer 2

这种行为是完全正常的。

在组件的构造方法中不添加private或public 关键字 myService 变量被评估为局部变量，因此被销毁在方法调用结束时。

当你添加private或public 关键字，TypeScript 会将变量添加到 class 属性，因此您稍后可以用 this[= 调用属性 29=] 关键字。

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

Angular 2 服务未注入组件

Angular 2 service not being injected into component

typescript

angular

angular2-injection

angular2-services