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

Question

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

进入主视图（与app.component.tsclass相关的那个）我的情况是：

<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组件class我有：

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]

据我了解，它指定此 class 是 AccountsService 必须注册为 AppComponent 的服务主要组件和 其所有子组件。这个说法是真的还是我遗漏了什么？

所以，就是说这两个子组件classes与之前的app-new-account和app-account[=相关47=] 标签共享 AccountsService class 的同一个实例作为服务？

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

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

Answer 1

So, it means that the two sub components classes related to the previous app-new-account and app-account tags share the same instance of the AccountsService class as service?

是的。每个组件实例都会创建一个注入器。由于注入器是分层的，因此组件的所有子组件都访问与父组件相同的服务实例。除非他们使用相同的标记在自己的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]

宿主元素

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

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

宿主元素

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

How exactly works the services hierarchy in this Angular 2 application?

javascript

javascript-framework

angular2-services

angular