理解 Angular 中服务的用途

2020-07-12 08:00:00 · 飞浪

介绍可重用的Angular服务旨在将业务逻辑和数据与Angular的不同组件封装在一起。它基本上是一个具有明确目的的类。您可以为不与任何特定视图关联的数据或逻辑创建一个服务类，以便在组

介绍

可重用的 Angular 服务旨在将业务逻辑和数据与 Angular 的不同组件封装在一起。它基本上是一个具有明确目的的类。您可以为不与任何特定视图关联的数据或逻辑创建一个服务类，以便在组件之间共享。

为什么需要服务

如果把所有的业务逻辑都写在组件中，那么会存在以下问题：

您将无法在其他任何地方重复使用该逻辑，并且必须在目标组件中重新编码整个逻辑。
您的组件将变得难以维护，因为您必须维护相同代码的两个副本。

因此，如果将业务逻辑包装在可重用的 Angular 服务中，不仅可以保持组件清洁，还可以获得可重用性和可维护性的好处。

最佳实践

如果任何组件方法的逻辑超过十行代码，则应将其视为可包装在可重用的 Angular 服务中的候选。务必使用@Injectable()装饰器装饰您的服务类，这样当您在此服务中注入任何其他服务时，就不会出现错误。

依赖注入

依赖注入用于为组件提供它们可以使用的服务。要在 Angular 中将类定义为服务，请使用@Injectable()装饰器。它提供元数据，允许 Angular 将其作为依赖项注入到组件中。同样，@Injectable()装饰器用于指示组件或其他类（例如另一个服务、管道或 NgModule）具有依赖项。

在依赖容器中注册服务

有两种方法可以在任何模块的提供程序数组中注册服务：

手写方法
速记方法

手写法

在普通方法中，你可以在任意模块的提供程序数组中注册一个具有两个属性provide和useValue的对象，如下所示：

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EventService } from './events/shared/event.service';
import { VoterService } from './events/event-details/voter.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [ 
              {
                provide: EventService,
                useValue: EventService
              }
              ],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

速记法

在简写方法中，您可以在模块中的提供程序数组中指定服务类的名称，如下所示：

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EventService } from './events/shared/event.service';
import { VoterService } from './events/event-details/voter.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [ 
              EventService
              ],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

使用 Angular 服务进行组件通信

可重复使用的 Angular 服务还可用于在两个组件之间建立通信。组件可以是父子关系，也可以是兄弟关系。无论关系类型如何，服务都可用于在两个组件之间共享数据。您所需要的只是服务类中的公共属性，一个组件将设置该属性，另一个组件将使用该属性，反之亦然。用作两个组件之间桥梁的服务必须注入到两个组件中。

Angular 中的服务实例

无论您尝试在多少个组件中使用服务，Angular 都只会创建该服务的一个实例。因此，Angular 服务默认是单例。这有助于服务在两个或多个组件之间建立通信。

结论

恭喜！您现在已经熟悉了 Angular 服务、用于注册它们的方法以及如何在 Angular 中建立组件通信。有关更多信息，请参阅Angular 基础知识。

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

_查看原文

技术指南

阅读全文

理解 Angular 中服务的用途

杭州电子商务研究院

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

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { EventService } from './events/shared/event.service'; import { VoterService } from './events/event-details/voter.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AppRoutingModule ], providers: [ { provide: EventService, useValue: EventService } ], bootstrap: [AppComponent] }) export class AppModule { }

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { EventService } from './events/shared/event.service'; import { VoterService } from './events/event-details/voter.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AppRoutingModule ], providers: [ EventService ], bootstrap: [AppComponent] }) export class AppModule { }