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

我是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>

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

providers: [AccountsService]

根据我的理解，指定该类为AccountsService必须注册为AppComponent主组件的服务，并且必须注册为其所有子组件的服务。这是真的还是我遗漏了什么

因此，这意味着与先前的应用程序新帐户和应用程序帐户标记相关的两个子组件类作为服务共享AccountsService类的相同实例

这是因为在这两个子组件的提供者数组中，我没有帐户服务

是我的理由正确还是我遗漏了什么

这意味着两个子组件类与 以前的应用程序新帐户和应用程序帐户标记共享同一实例 AccountsService类作为服务的名称

对。每个组件实例创建一个注入器。由于injector是分层的，所以组件的所有子组件都访问与父组件相同的服务实例除非他们使用相同的令牌在自己的

提供者
数组中定义服务。以下是喷油器示意图：

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



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

因此，如果您在
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>  <----------------

这意味着，如果
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]

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

<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

  // 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]