使用 Angular 模块或组件注册服务
介绍
在使用 Angular 服务之前，必须先将其注册到 Angular 模块或 Angular 组件中。在 Angular 中注册服务有多种方法。在本指南中，您将了解注册 Angular 服务并在其他服务和组件中使用它的不同方法。
在组件中注册服务
当相关服务与相关组件严格相关且不会在应用程序的其他地方使用时，应使用此方法。您可以使用以下语法注册服务。
import { Component, OnInit } from '@angular/core';
import { DemoService } from './demo.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers:[DemoService]
})
export class AppComponent implements OnInit {
title = 'services-demo';
someProperty;
constructor(private demoService:DemoService)
{
}
ngOnInit()
{
this.someProperty = this.demoService.someProperty;
}
}
请注意，在组件的提供程序数组中，服务已注册，然后在组件的构造函数中使用。这样，整个应用程序中的任何其他组件、指令或管道都不会使用该服务。
真实世界场景
假设您正在构建一个应用程序，其中需要构建一个将文本转换为语音的组件。此组件将需要一项服务，该服务将与 Microsoft、Google 或 Facebook 的一些著名语言翻译 API 进行通信。此可重用的 Angular 服务将仅在此组件中使用，而不会在其他任何地方使用，因此只能在此组件中注入。
在 AppModule 中注册服务
当您希望在整个应用程序中仅使用一个服务实例时，应使用此方法。当整个应用程序中只有一个服务实例时，它被称为单例服务。您可以使用以下语法在应用模块中注册服务：
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DemoService } from './demo.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [DemoService],
bootstrap: [AppComponent]
})
export class AppModule { }
请注意，在组件的提供程序数组中，服务已注册。这样，服务就可以在应用程序中的任何模块、服务、组件、指令或管道中使用。
使用 providedIn 属性自行注册服务
这是注册服务的一个实例的另一种方法，该实例可在整个应用程序的任何模块、服务、组件、指令或管道中使用。您可以使用以下语法在应用程序的根注入器中注册服务。这是从 Angular 6.0 开始创建单例服务的首选方法。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DemoService {
someProperty = 'Some Value';
constructor() { }
}
请注意，Injectable()装饰器中的providedIn属性已用于在应用程序的根注入器中注册服务。
真实世界场景
此示例适用于上述两种方法，可帮助您注册服务的单例实例。在任何企业应用中，身份验证都是一个重要方面。在单页应用框架中，服务通常与相应的服务器端 API 通信，因此身份验证服务将与服务器上的身份验证端点通信。在客户端，只需要此服务的一个实例，因此可以在 AppModule 中注册此服务，或使用服务本身的providedIn属性。简单的身份验证服务至少有一个currentUser属性，告知哪个用户当前已登录。登录和注销方法如下所示。
import { Injectable } from '@angular/core';
@Injectable(
{providedIn: 'root' }
)
export class AuthService {
currentUser:IUser;
constructor() { }
login(){}
logout()
{}
}
通过在模块中注册来实现服务的单实例
当您在功能模块中注册服务并且该功能模块仅由应用程序级AppModule导入时，也只存在一个服务实例，并且可供应用程序中的任何其他功能模块、服务、组件、指令或管道使用。
真实世界场景
任何应用程序都可能需要在某些用户交互时向最终用户显示小型提示消息。可以使用 Toastr Javascript 库向用户显示此类提示消息。由于 Toastr JavaScript 库是一个原生 JavaScript 库，因此最好将其包装在可重用的 Angular 服务中。此 Toastr 可重用服务是可在共享模块中注册的共享服务的示例。共享模块通常是仅由应用程序模块导入的模块，因此组件中只会存在一个 Toastr 服务实例。
结论
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~