介绍
在本指南中，我们将学习如何使用提供程序数组注册服务。如您所知，如果您想在两个非父子关系的组件之间进行通信，服务是 Angular 中的一个重要概念。在这种情况下，您需要创建一个服务并将其注入到组件中。
有几种方法可以将服务注入组件。今天，我们将借助提供程序数组来注入服务。如果您以前没有听说过这个术语，请不要担心；我将介绍从创建服务到将其注入提供程序数组的所有内容。
那么让我们开始创建一个 Angular 应用程序。
创建 Angular 应用
要创建 Angular 应用程序，您需要在 Angular CLI 中点击以下命令。
ng new demo-app
现在我们有一个名为AppComponent的组件。我们将创建一个服务并向AppComponent注册。
创建服务
以下命令将帮助您创建服务而无需创建单元测试文件，因为我们暂时不执行任何单元测试。
ng g s demo --skipTests=true
您可以看到我们的DemoService结构类似于下面的代码片段。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DemoService {
constructor() { }
}
@Injectable 装饰器帮助注入服务
这里我们有@Injectable装饰器。@Injectable装饰器的providedIn表示我们已经在全局级别实现了服务，因此我们不必在要使用该服务的每个组件中注入它。
但在许多情况下，您不想在根级别注入它。有很多原因，例如为了提高应用程序的性能。在这些情况下，我们需要在要使用该服务的每个组件中手动注入该服务。
我将从服务中删除@Injectable装饰器，并编写一个函数来测试没有@Injectable 的组件中的注入是否成功。
最后，我们的服务将类似于下面的代码片段。
export class DemoService {
constructor() { }
testFunction(){
console.log('Test function called:');
}
}
在组件中使用 Providers 数组
现在我将使用提供程序数组在AppComponent中注入服务并调用服务类的函数来测试我们组件中的服务注入。
应用程序.组件.ts
import { Component, OnInit } from '@angular/core';
import { DemoService } from './demo.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers:[DemoService]
})
export class AppComponent implements OnInit {
constructor(private demoService: DemoService) { }
ngOnInit() {
this.demoService.testFunction();
}
}
我们已成功将我们的服务注入AppComponent中。现在我们可以运行它进行测试。
以下是输出：
Test function called: demo.service.ts:6
我们已通过注入服务成功执行了我们的应用程序。可以在不同的组件中使用此注入的服务。例如，您可以在应用程序中创建不同的模块来添加延迟加载，并在模块中注入服务。这将使此模块下的所有组件都可以使用延迟加载服务。
在模块中使用 Providers 数组
现在我们将使用app.module.ts向您展示如何在另一个模块上注入服务的演示。以下是带有提供程序数组的代码。
应用程序.模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule
],
providers: [DemoService],
bootstrap: [AppComponent]
})
export class AppModule { }
通过在模块而不是每个单独的组件上注入服务，您可以看到相同的输出。
结论
本指南主要介绍如何借助提供程序数组注入服务。希望您喜欢它。您可以在此处阅读更多相关信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
