你好！我希望您已经阅读了我们有关 angular 组件和路由的教程。在这篇文章中，我们将继续讨论 angular 中的另一个有趣的概念：服务。
如果 Angular 组件是我们应用程序的表示层，那么什么将负责实际获取真实数据并执行业务逻辑？这正是 Angular 服务的用武之地。Angular 服务的作用是获取、组织并最终跨组件共享数据、模型和业务逻辑。
在深入了解 Angular 服务的技术细节之前，让我们先了解一下其功能。这将帮助您了解代码的哪一部分需要放置在组件内，以及哪一部分需要放置在 Angular 服务内。
以下是有关服务的一些重要事实：
服务是使用 @Injectable 装饰器定义的。这告诉 Angular 该服务可以注入到组件或其他服务中。稍后我们将详细讨论注入服务。
服务是保存所有业务逻辑并跨组件共享的地方。这使您的应用程序更具可扩展性和可维护性。通常，服务也是与后端交互的正确位置。例如，如果您需要进行AJAX调用，可以在服务内部创建完成调用的方法。
服务是单例类。您的 Angular 应用程序中只会运行特定服务的单个实例。
什么是服务？Angular 中的服务是在应用程序的生命周期中仅实例化一次的对象。服务接收和维护的数据可以在整个应用程序中使用。这意味着组件可以随时从服务获取数据。 依赖注入用于在组件内部引入服务。
让我们尝试了解如何创建服务并在 Angular 组件中使用它。您可以在我们的 GitHub 存储库中找到该项目的完整源代码。
获得源代码后，导航到项目目录并使用 npm install 安装所需的依赖项。安装依赖项后，通过键入以下命令启动应用程序：
ng serve您应该让应用程序在 https://localhost:4200/. 上运行
我们项目的整体文件夹结构如下。
src --app ----components ------employee.component.css ------employee.component.html ------employee.component.ts ----services ------employee.service.spec.ts ------employee.service.ts ------employeeDetails.service.ts --app.routing.module.ts --app.component.css --app.component.html --app.component.spec.ts --app.component.ts --app.module.ts --assets --index.html --tsconfig.json 1.构建服务的骨架在 Angular 中创建服务有两种方法：
现在，.service.ts 文件已在您的项目结构中创建，是时候填充服务的内容了。为此，您必须决定服务需要做什么。请记住，您可以拥有多个服务，每个服务都执行特定的业务操作。在我们的例子中，我们将使用 employee.service.ts 将静态角色列表返回给使用它的任何组件。
在employee.service.ts中输入以下代码。
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class EmployeeService { role = [ {'id':'1', 'type':'admin'}, {'id':'2', 'type':'engineer'}, {'id':'3', 'type':'sales'}, {'id':'4', 'type':'human_resources'} ] getRole(){ return this.role; } }此服务仅向应用程序返回角色的静态列表。让我们逐行解码该服务。
如前所述，Angular 中的服务用于保存应用程序的业务逻辑。为了向查看者显示数据，我们需要一个表示层。这就是传统的基于类的 Angular 组件的用武之地，它是使用装饰器 @Component 创建的。
您可以在本系列的上一篇文章中了解有关 Angular 组件的更多信息。它将帮助您理解 Angular 组件并创建您自己的组件。创建文件 employee.component.ts 并向其中添加以下代码：
import { Component, OnInit } from '@angular/core'; import { EmployeeService } from '../services/employee.service'; @Component({ selector: 'employee', templateUrl: './employee.component.html' }) export class EmployeeComponent implements OnInit { role: any; constructor(private employeeService: EmployeeService) { } ngOnInit(): void { this.role = this.employeeService.getRole() } }让我们分解一下：
这可以变得更简单吗？由于该服务是一个单例类，因此可以在多个组件之间重用，而不会造成任何性能损失。
4.创建视图现在我们的组件中有数据了，让我们构建一个简单的 employee.component.html 文件来迭代角色并显示它们。下面，我们使用 *ngFor 来迭代角色，并仅向用户显示类型。
<h3>Data from employee.service</h3> <ul> <li *ngFor = "let role of roles">{{role.type}}</li> </ul> 5.运行项目在项目启动并运行之前我们只剩下一步了。我们需要确保 employee.component.ts 文件包含在 @NgModule 指令内的声明列表中。
如下所示，EmployeeComponent 已添加到 app.module.ts 文件中。
//app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { EmployeeComponent } from './components/employee.component'; @NgModule({ declarations: [ AppComponent, EmployeeComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }有趣的是，我们尚未将该服务添加到我们的提供商列表中，但我们能够成功使用该服务。为什么？因为我们已经指定在应用程序的根级别提供服务（即使用 providedIn: 'root' 参数）。但是，请继续阅读以了解有关我们确实需要在 @NgModule 的 providers 数组中提及服务的场景的更多信息。
此外，我们还需要将 employee 元素添加到 app.component.html 文件中。
<h1> Tutorial: Angular Services </h1> <employee></employee> <router-outlet></router-outlet>如果我们到目前为止运行我们的应用程序，它将如下所示：
现在，我们将获取特定于 employee.component.ts 的数据。
让我们创建一个新服务来从 API 获取数据。
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class EmployeDetailsService { fetchEmployeeDetailsURL = 'https://reqres.in/api/users?page=2' constructor(private http: HttpClient) { } fetchEmployeeDetails = () => { return this.http.get(this.fetchEmployeeDetailsURL); } }现在，让我们逐行理解我们的代码。
与我们的第一个服务不同，我们在 app.module.ts 中注册 EmployeeDetailsService 至关重要，因为我们尚未在根级别声明可注入。这是更新后的 app.module.ts 文件：
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { EmployeeComponent } from './components/employee.component'; import { EmployeDetailsService } from './services/employeeDetails.service'; @NgModule({ declarations: [ AppComponent, EmployeeComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [ EmployeDetailsService], bootstrap: [AppComponent] }) export class AppModule { }如果您密切关注，您可能会注意到两个重要的变化：
就是这样 - 我们现在准备在组件中使用 EmployeeDetailsService 。
8.获取动态数据为了适应新服务，我们将对组件进行一些更改。
添加一个按钮来加载数据首先，我们将在视图中添加一个按钮。当我们单击此按钮时，将通过 AJAX 调用加载数据。这是更新后的employee.component.html文件：
<h3>Data from employee.service</h3> <ul> <li *ngFor = "let role of roles">{{role.type}}</li> </ul> Load Employee Details- {{employee.email}}
接下来订阅EmployeDetailsService中的getter函数。为此，我们将 EmployeDetailsService 添加到 employee.component.ts 中的构造函数中：
import { Component, OnInit } from '@angular/core'; import { EmployeeService } from '../services/employee.service'; import { EmployeDetailsService } from '../services/employeeDetails.service'; @Component({ selector: 'employee', templateUrl: './employee.component.html' }) export class EmployeeComponent implements OnInit { roles: any; employeeDetails: any; constructor(private employeeService: EmployeeService, private employeeDetailsService: EmployeDetailsService) { } ngOnInit(): void { this.roles = this.employeeService.getRole() } loadEmployeeDetails = () => { this.employeeDetailsService.fetchEmployeeDetails() .subscribe((response:any)=>{ this.employeeDetails = response.data; }) } }完成此更改后，单击 LoadEmployeeDetails 按钮，我们将看到以下视图。
给你！我们已经逐步构建了一个可以处理静态和动态数据的 Angular 服务。现在，您应该能够构建自己的 Angular 服务并使用它们通过 AJAX 调用获取数据。您甚至可以以更可重用的方式实现业务逻辑。
以上就是Angular 服务：初学者综合指南的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
发表评论