如何使用 Angular 8 服务？

在 Angular 中，服务是单例对象，通常只为整个 Angular 应用程序实例化一次。每个服务包含多个方法，其中包括一些要执行的功能。这是一种在一种或多种组件中共享功能或职责的机制。

我们知道，使用 Angular，我们可以创建基于嵌套的组件。一旦我们的应用程序嵌套，我们可能需要使用相同的功能。与其在多个组件中编写相同的代码，不如在一个地方编写代码，然后与不同的组件共享数据。使用服务来处理这个问题是最好的方法。

在 Angular 的早期版本中，我们习惯于使用提供程序、工厂、委托、值等来创建服务，并且清楚地知道需要使用哪一个。但是，在 Angular 8 中，它使通过以下两种方法创建服务变得清晰。

  • 使用 @Injector 装饰器创建服务

  • 使用依赖注入注册类或注入类。

让我们看看下面如何在我们的应用程序中定义服务。

我们可以根据需要创建自己的服务。要创建服务，请按照以下步骤操作。

  • 首先创建一个带有正确名称的 service.ts 文件。

  • 在此文件中，从 @angular/core 包导入 Injectable 并为类的开头提供 @Injectable 装饰器。

  • 导出类对象。这样我们就可以在其他组件中使用此服务。

  • 根据导出类对象中的需求编写业务逻辑。

注意

当我们使用提供程序元数据创建自己的服务时，我们需要在 app.module.ts 文件中导入它才能使用该服务的的功能。如果我们没有导入创建的服务，它将对整个应用程序不可见。如果我们只在一个组件中导入创建的服务而没有导入到主模块中，则该服务仅对该特定组件可用。如果我们在主模块中提供服务，则只会为整个应用程序创建服务的单个实例。

让我们看看下面的代码。

示例

在 app 文件夹中创建一个服务类。我在 app 文件夹中创建了 getMessageService.service.ts 文件。

在 **getMessageService.service.ts** 文件中添加如下代码。

import { Injectable } from '@angular/core';
@Injectable()
export class GetMessageService
{
   constructor()
   { }
   showMessage(message: string)
   {
      return "Message from angular service";
   }
}

在这里，@Injectable 是 Angular 中的一个装饰器。装饰器帮助我们提供修改或使用类、方法、属性和参数的能力。这个 Injectable 就像一个普通的类。当我们创建一个 Injectable 类的对象时，就像 ngOnInIt() 方法一样，构造函数将被执行。

@Injectable 指出此处此特定类可以与依赖注入器一起使用。如果我们想将服务注入到其他组件中，必须定义 @Injectable() 装饰器。

Injectable 服务无法销毁。如果我们想删除服务类的实例，我们需要删除该类的依赖注入的引用点。

现在，让我们直接在我们的主模块（即 **app.module.ts**）中导入服务类。例如：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { GetMessageService } from "./getMessageService.service";
@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule],
   providers: [GetMessageService],
   bootstrap: [AppComponent]
})
export class AppModule {};

在这里，我们将服务类作为提供程序导入。在 @NgModule 中，我们有四个部分。

声明 - 定义导入的组件和指令

导入 - 定义导入的模块

提供程序 - 定义导入的服务

引导 - 定义要显示数据的根组件

现在，让我们注入服务类并从服务中获取数据并在 UI（即 **app.component.ts** 文件）中显示。

import { Component } from '@angular/core';
import { GetMessageService } from './getMessageService.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   message: string = "";
   constructor(private msgService: GetMessageService ) {}
   ngOnInit() {
      this.message = this.msgService.showMessage ();
   }
}

在 **app.component.html** 文件中

<p>Service example</p>
<p>{{message}}</p>

输出

Service example
Message from angular service

像这样，我们可以创建自定义服务，并与多个组件共享数据。

上面，我们讨论了什么是服务以及它的用途。如何创建它们。我们主要使用服务来与一个或多个组件共享公共数据或功能。使用服务，我们可以实现代码可重用性。

更新于：2023年2月21日

144 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告