此 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 个子组件(应用程序新帐户和应用程序帐户(。

在主要的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;
}
}

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

providers: [AccountsService]

据我所知，它指定此类是AccountsService必须注册为AppComponent主组件及其所有子组件的服务。这个断言是真的还是我错过了什么？

那么，这意味着与以前的应用程序新帐户和应用程序帐户标签相关的两个子组件类与服务共享相同的AccountsService类实例？

这是原因吗，因为在这两个子 somponent 的提供程序数组中我没有帐户服务？

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

Answer 1

因此，这意味着与 以前的应用新帐户和应用程序帐户标签共享同一实例 的帐户服务类作为服务？

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