这个 Angular 2 应用程序中的服务层次结构究竟是如何工作的？

Posted 2023-02-22

【中文标题】这个 Angular 2 应用程序中的服务层次结构究竟是如何工作的？

【英文标题】：How exactly works the services hierarchy in this Angular 2 application?

【发布时间】：2018-01-14 21:23:27

【问题描述】：

我是 Angular 2 的新手，我有以下关于 服务 的问题。

进入主视图（与app.component.ts类相关的那个）我有这种情况：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
      <app-new-account (accountAdded)="onAccountAdded($event)"></app-new-account>
      <hr>
      <app-account
        *ngFor="let acc of accounts; let i = index"
        [account]="acc"
        [id]="i"
        (statusChanged)="onStatusChanged($event)"></app-account>
    </div>
  </div>
</div>

因此，在这个视图中，我有 2 个子组件（app-new-account 和 app-account）。

进入我拥有的主要 AppComponent 组件类：

import Component, OnInit from '@angular/core';
import AccountsService from './accounts.service';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AccountsService]
)
export class AppComponent implements OnInit 

  accounts: name: string, status: string[] = [];

  // Injectiong the AccountsService:
  constructor(private accountsService: AccountsService) 

  ngOnInit() 
    this.accounts = this.accountsService.accounts;
  

我通过这一行将 AccountsService 定义为组件装饰器中的服务：

providers: [AccountsService]

据我了解，该类是 AccountsService 必须注册为 AppComponent 主组件和 其所有子组件的服务强>。这个断言是真的还是我遗漏了什么？

也就是说，与前面的app-new-account和app-account标签相关的两个子组件类共享同一个实例AccountsService 类即服务？

这是因为在这 2 个子组件的 providers 数组中我没有 AccountsService 吗？

这是我的推理正确还是我遗漏了什么？

【参考方案1】：

所以，这意味着两个子组件类相关的 以前的 app-new-account 和 app-account 标签共享同一个实例 作为服务的 AccountsService 类？

是的。每个组件实例都会创建一个注入器。由于注入器是分层的，组件的所有子组件都访问与父组件相同的服务实例。 除非他们在自己的providers 数组中定义服务使用相同的令牌。这是注射器的示意图：

// all components share the same instance
     AppComponentInjector
  providers: [AccountsService]
       /               \
      /                 \
 app-new-account     app-account

---

    // app-new-account has its own instance
             AppComponentInjector
          providers: [AccountsService]
           /                     \
          /                       \
   app-new-account                 app-account
   providers: [AccountsService]

---

     // every component has its own instance
         AppComponentInjector
      providers: [AccountsService]
       /                           \
      /                             \
  app-new-account                   app-account
  providers: [AccountsService]      providers: [AccountsService]

宿主元素

我还想在这里提供更多细节，因为我认为这在其他地方没有明确解释。注入器是在组件/指令宿主元素上创建的。这意味着指令会在它所在的宿主元素上创建自己的注入器。

因此，如果您在AppComponent 模板中的hr 元素上放置带有提供程序的指令：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
      <app-new-account (accountAdded)="onAccountAdded($event)"></app-new-account>
      <hr somedirectivewithproviders>  <----------------

您将具有以下层次结构：

  // all components and directives share the same instance
                AppComponentInjector
            providers: [AccountsService]
        /               |                  \
       /                |                   \
app-new-account somedirectivewithproviders   app-account

这意味着如果somedirectivewithproviders定义AccountsService并注入它，它将像组件一样获取新实例。但是组件仍然会从AppComponentInjector获取实例：

  // all components and directives share the same instance
                    AppComponentInjector
                 providers: [AccountsService]
        /                      |                    \
       /                       |                     \
// gets same instance   //gets new own instance      // gets same instance   
 app-new-account      somedirectivewithproviders     app-account
                      providers: [AccountsService]