Angular 2 服务没有被注入到组件中 [英] Angular 2 service not being injected into component

问题描述

我在 Angular2 (2.0.0-beta.0) 应用程序中定义了一项服务.是这样的:

I have a service defined in my Angular2 (2.0.0-beta.0) application. It's something like this:

import {Injectable} from "angular2/core";

@Injectable()
export class MyService {
    constructor() {

    }

    getSomething() {
        return 'something';
    }
}

我将它列在我的主应用程序文件的 bootstrap() 函数中，以便它通常可用于我的代码:

I have it listed in my bootstrap() function in my main app file so that it should be made available to my code in general:

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

有时我无法在组件中使用该服务，即使我在组件 constructor() 函数中有类似 myService:MyService 的东西，如下所示:

Sometimes I can't use the service in a component, even though I have something like myService:MyService in the component constructor() function, like this:

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

在其他地方它工作正常.在它不起作用的地方，我会收到一条消息，就像我尝试访问它一样:

In other places it works fine. In places where it doesn't work, I get a message like if I try to access it:

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

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

It basically means the service was not injected.

是什么导致它没有被注入?

What is causing it to not be injected?

推荐答案

问题是依赖注入似乎不起作用，除非您在构造函数中将注入的对象标记为 private 或 public.

The problem is that it appears that the dependency injection won't work unless you have the injected objects in the constructor marked as either private or public.

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

Adding either of those two things in front of the service injection in my component's constructor made it work fine:

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

这篇关于Angular 2 服务没有被注入到组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！