Question

我在调用我认为可在全球范围内使用的服务中的函数时遇到问题。我创建了一个名为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]
})

Answer 1

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

这样的事情：

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），您将能够在应用程序的任何位置注入它。您也可以在注射范围不同的给定模块中注册您的服务。（您应该小心，因为您可以在给定时间以不同的服务实例结束。）

Answer 2

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

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

service;

constructor(service:SavedNotificationService)
{

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

}

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

2 个答案: