Angular 2 - 如何在app模块级别提供服务

时间:2017-03-27 09:03:24

标签: angular typescript

我在调用我认为可在全球范围内使用的服务中的函数时遇到问题。我创建了一个名为SavedNotificationService的服务:

import { Injectable } from '@angular/core';

@Injectable()
export class SavedNotificationService {

    private showSavedNotification = false;

    show(): void {
        this.showSavedNotification = true;
    }

    hide(): void {
        this.showSavedNotification = false;
    }

}

我已经在app.module.ts中导入了它:

import { SavedNotificationService } from "./saved-notification.service";
@NgModule({
providers: [SavedNotificationService]
})

但是当我想在服务中调用一个函数时,它说它无法找到它。虽然我已经在app.module上提供了该服务,但是我仍然需要在我想要使用的组件上导入它吗? (如下例所示)

@Component({
  providers: [SavedNotificationService]
})

2 个答案:

答案 0 :(得分:2)

您必须导入它,然后通过构造函数将其作为依赖项注入组件。

这样的事情:

import { ExampleService } from '....' // where your services are.

@Component({
    moduleId: module.id,
    selector: 'example-component',
    templateUrl: 'example-component.html'
})
export class ExampleComponent implements OnInit {
    constructor(private _exampleService: ExampleService) { 
    }

Here您可以阅读有关注入服务和使用它们的更多信息。

P.S:如果您在全球范围内注册您的服务(AppModule),您将能够在应用程序的任何位置注入它。您也可以在注射范围不同的给定模块中注册您的服务。(您应该小心,因为您可以在给定时间以不同的服务实例结束。)

答案 1 :(得分:1)

在模块中声明服务后,无需在组件中重新声明...只需将其导入组件并在构造函数中初始化为

import { SavedNotificationService } from "./saved-notification.service";
@Component({
})
export class xyz{

service;

constructor(service:SavedNotificationService)
{

}
//call the method using this instance
service.show();

}