在 Angular 中使用 Providers 数组注册服务

2020-01-23 08:00:00 · 飞浪

介绍在本指南中，我们将学习如何使用提供程序数组注册服务。如您所知，如果您想在两个非父子关系的组件之间进行通信，服务是Angular中的一个重要概念。在这种情况下，您需要创建一个服务并将

介绍

在本指南中，我们将学习如何使用提供程序数组注册服务。如您所知，如果您想在两个非父子关系的组件之间进行通信，服务是 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 { }
    

通过在模块而不是每个单独的组件上注入服务，您可以看到相同的输出。

结论

本指南主要介绍如何借助提供程序数组注入服务。希望您喜欢它。您可以在此处阅读更多相关信息。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 中使用 Providers 数组注册服务

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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

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 { }