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

Question

我是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类相同的实例作为服务？

这是因为在这两个子组件的提供者数组中我没有AccountsService吗？

这是我的理由是正确还是我错过了什么？

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

主机元素

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

因此,如果您hr在AppComponent模板中的元素上放置了包含提供程序的指令:

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