服务和依赖注入如何工作？

Angular 将组件与服务区分开来，以增加模块化和可重用性。 通过将组件的视图相关功能与其他类型的处理分离，您可以使组件类精简和高效。

有时，当组件之间的距离很大时，使用 Input 、Output 和 EventEmitters 在组件之间共享数据变得非常复杂。 因此，我们使用服务以优雅的方式管理这种跨组件通信。

Angular 将类解释为基于 @Injectable 装饰器的服务。 我们还必须在提供程序中定义我们的服务，以便 Angular 开始使用依赖注入或 DI 的概念。

我们可以在组件本身上提供服务，然后该服务将为该特定组件及其子组件提供相同的服务实例，直到在子组件中再次定义和覆盖。

 @Component({
 selector: 'app-root',
 templateUrl: './app.component. HTML ',
 styleUrls: ['./app.component.css'],
 providers: [AccountsService]
})  

另一种方法是在 app.module.ts 的提供者数组中定义它，以便该服务的全局实例在整个应用程序中可用，直到在组件中再次定义和覆盖。

 @NgModule({
...
imports: [...],
providers: [AccountsService],
...
})  

在深入研究服务之前，让我们先了解一下依赖注入（简称 DI）。

根据 Angular 文档：

Angular 的 DI 框架在实例化时为类提供依赖项。使用 Angular DI 来增加应用程序的灵活性和模块化。

服务可以向组件树中的任何注入器注册。您将服务作为提供者插入到 @Component 元数据字段中：提供者：[]。该服务可供组件及其子级使用。

另一种方式， providers: [] 元数据作为其自己的字段存在于 @NgModule 装饰器中。该服务可从模块实例化到底层组件树。

让我们试着通过一个例子来理解服务和 DI 的使用。

下面是我们应用程序的屏幕截图，其中显示了 1 个用于添加用户活动帐户的表单，该用户活动帐户由用户名和活动组成。

UserActivity 类如下所示：

 export class UserActivity{username: string;
activity: string;constructor(name, status) {
 this.username = name;
 this.activity = status;
}}  

在输入信息并触发添加帐户按钮的（单击）事件时，用户活动被添加到下面的列表中（默认情况下在列表中保留 2 个用户活动）。

应用细分：1 个根应用组件，1 个新帐户组件，用于插入新的表单信息和按钮，1 个帐户组件用于显示用户活动列表。

如果我们观察到，在新帐户组件中输入信息时，我们需要将其传达给其兄弟帐户组件。 这一切都可以在不使用服务的情况下实现，但它需要大量的处理和数据传输，比如我们需要存储新的用户信息，然后通过单击按钮通过事件发射器发出相同的信息。 此事件将到达父应用组件，该组件被进一步订阅、存储并作为属性传递给它的另一个子组件，即。 帐户组件。 帐户组件将存储这些新数据并显示它的位置。

如果我们创建一个服务，比如 AccountsService，并让它充当管理用户活动列表和将新用户活动推送到 现有清单。

在下面的代码中，我们所要做的就是创建一个 AccountsService 类。 可注入装饰器，由你定义与否。 通常，当您将一项服务注入另一项服务时会使用它，但 Angular 按照惯例建议在所有服务上使用它。

我已经在 app.module.ts 提供者中声明了我的服务。 现在在任何组件的 构造函数 中，我都可以按照 DI 的概念直接注入我的服务实例，如上所述。

现在我们可以通过调用服务 addUserActivity() 并通过单击其 (click) 事件绑定到 onCreateAccount() 的按钮传递数据来推送新用户帐户。

现在在根 AppComponent 中，我们再次注入我们的服务并将 userActivity 列表存储在本地属性中，该属性传递给进一步显示用户活动列表的帐户组件。

我们使用 ngFor 指令循环访问本地 userActivity 列表，并将每个项目的信息进一步传递给 account 组件，如下实现：

在 account 组件中，我们可以绑定 account 和 id，我们可以使用 字符串 插值进一步绑定到 HTML。

 import { Component, Input } from '@angular/core';
import { UserActivity } from '../model/useractivity.model';@Component({
 selector: 'app-account',
 templateUrl: './account.component.html',
 styleUrls: ['./account.component.css']
})
export class AccountComponent {@Input() account: UserActivity;
@Input() id: number; constructor () {}}