在 Angular 中，服务 service 是一个非常重要的概念。它可以用来共享数据和逻辑代码，使得应用程序更加模块化和可维护。在本文中，我们将深入探讨 Angular 服务的各个方面，包括如何定义和使用服务，以及如何注入依赖项等。
什么是 Angular 服务 service？
在 Angular 中，服务是一个可注入的类，它可以在组件之间共享数据和逻辑代码。服务通常用于封装一些常用的业务逻辑，比如数据访问、日志记录等。服务可以被多个组件使用，使得应用程序更加模块化和可维护。
如何定义 Angular 服务？
在 Angular 中，定义服务非常简单。我们只需要创建一个普通的 TypeScript 类，并在类上添加 @Injectable 装饰器，就可以将它定义为一个可注入的服务。例如：
// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string[] = [];
addData(value: string) {
this.data.push(value);
}
getData() {
return this.data;
}
}在上面的代码中，我们创建了一个名为 DataService 的服务，并定义了两个方法 addData 和 getData，用于添加数据和获取数据。注意，在类上添加 @Injectable 装饰器可以让 Angular 自动为我们创建服务的实例，并注入依赖项。
如何使用 Angular 服务？
使用 Angular 服务也非常简单。我们只需要在组件的构造函数中注入服务，并调用服务的方法即可。例如：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
<input [(ngModel)]="value">
<button (click)="addData()">Add Data</button>
<ul>
<li *ngFor="let item of data">{{ item }}</li>
</ul>
`
})
export class AppComponent {
value: string;
data: string[];
constructor(private dataService: DataService) {
this.data = dataService.getData();
}
addData() {
this.dataService.addData(this.value);
this.value = '';
}
}在上面的代码中，我们在 AppComponent 的构造函数中注入了 DataService，并在 addData 方法中调用了服务的 addData 方法。注意，在组件中注入服务时，需要将服务的类型作为构造函数的参数，并将参数标记为 private。
如何注入依赖项？
在 Angular 中，服务可以注入其他服务或组件，以便共享数据和逻辑代码。注入依赖项也非常简单，我们只需要在构造函数中将依赖项作为参数，并在参数前面添加 @Inject 装饰器即可。例如：
// javascriptcn.com 代码示例
import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(@Inject('API_URL') private apiUrl: string, private http: HttpClient) {}
getData() {
return this.http.get(`${this.apiUrl}/data`);
}
}在上面的代码中，我们在 DataService 的构造函数中注入了 HttpClient 和一个名为 API_URL 的字符串，用于访问数据接口。注意，在注入字符串时，需要在 app.module.ts 中使用 provide 函数将字符串注入到 DI 容器中。
总结
Angular 服务是一个非常重要的概念，它可以用来共享数据和逻辑代码，使得应用程序更加模块化和可维护。在本文中，我们深入探讨了 Angular 服务的各个方面，包括如何定义和使用服务，以及如何注入依赖项等。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656341a3d2f5e1655dce4740