你好呀！我希望您已经按照我们关于 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
.构建服务的骨架
在 Angular 中有两种创建服务的方法：
在项目中手动创建文件夹和文件。
使用该
ng g service <path/service_name>命令自动创建服务。当您使用这种方法时，您将自动在所选目录中获得一个.service.ts和一个.service.spec.ts文件。
ng g service components/employee
2.创建服务
现在.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;
}
}该服务只是将角色的静态列表返回给应用程序。让我们逐行解码服务。
Injectable我们从@angular/core库中导入。这是至关重要的，因为我们的服务将被使用或注入到组件中。该@Injectable指令允许我们识别服务。接下来，我们应用
@Injectable装饰器。的providedIn属性@Injectable指定注入器可用的位置。大多数时候，root被赋值为它的值。这意味着可以在应用程序级别注入服务。其他选项是any、platform、null或Type<any>。我们创建一个名为 的类组件
EmployeeService。这个类有一个方法getRole，它返回一个静态的对象数组。
3.创建一个组件
如前所述，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()
}
}让我们分解一下：
导入
@Component装饰器并调用它。我们指定'employee'选择器，并提供一个模板 URL，指向描述组件视图的 HTML。声明组件类并指定它实现
OnInit。因此，我们可以定义一个ngOnInit事件处理程序，该处理程序将在创建组件时调用。为了使用我们的服务，它必须在构造函数中声明。在我们的例子中，您将
private employeeService: EmployeeService在构造函数中看到。通过这一步，我们将使服务可以跨组件访问。由于我们的目标是在创建员工组件时加载角色，因此我们获取内部的数据
ngOnInit。
这可以变得更简单吗？由于该服务是一个单例类，因此可以跨多个组件重用它而不会造成任何性能损失。
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'参数）。但是，请继续阅读以了解更多关于我们确实需要providers在@NgModule.
此外，我们需要将employee元素添加到app.component.html文件中。
<h1> Tutorial: Angular Services </h1> <employee></employee> <router-outlet></router-outlet>
如果我们到目前为止运行我们的应用程序，它将如下所示：
6.从服务中动态获取数据
现在，我们将获取特定于我们的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);
}
}现在，让我们逐行理解我们的代码。
由于我们想通过 AJAX 调用获取数据，因此 import 很重要
HttpClient。如果您是新手HttpClient，可以在本系列的另一篇文章中了解更多信息。在我们的
EmployeeDetailsService中，我们没有指定provideIn参数。这意味着我们需要做一个额外的步骤来让整个应用程序知道我们的可注入服务。您将在下一步中了解这一点。HttpClient本身就是一个可注入的服务。在构造函数中声明它，以便将其注入到组件中。在该fetchEmployeeDetails方法中，我们将使用该HttpClient.get方法从 URL 中获取数据。
7.在app.module中注册服务
EmployeeDetailsService与我们的第一个服务不同，在app.module.ts中注册对我们来说至关重要，因为我们没有在根级别声明可注入。这是更新后的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 { }如果您密切关注，您可能已经注意到两个重要的变化：
在我们的
app.module.ts文件中，我们需要包含EmployeDetailsService在Providers.我们需要
HttpClientModule从@angular/common/http.HttpClientModule必须包含在我们的列表中imports。
就是这样——我们现在可以EmployeeDetailsService在我们的组件中使用了。
8.获取动态数据
为了适应新服务，我们将对组件进行一些更改。
添加按钮以加载数据
首先，我们将在视图中添加一个按钮。当我们单击此按钮时，数据将通过 AJAX 调用加载。这是更新后的employee.component.html文件：
<h3>Data from employee.service</h3>
<ul>
<li *ngFor = "let role of roles">{{role.type}}</li>
</ul>
<button (click)="loadEmployeeDetails()">Load Employee Details</button>
<ul>
<li *ngFor = "let employee of employeeDetails">{{employee.email}}</li>
</ul>订阅 Getter 函数
接下来，订阅EmployeDetailsService. 为了实现这一点，我们将在employee.component.tsEmployeDetailsService中添加我们的构造函数：
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 调用获取数据。您甚至可以以更可重用的方式实现您的业务逻辑。
- 添加按钮以加载数据
- 订阅 Getter 函数
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
