该Angular 2应用程序中的服务层次结构到底如何工作? [英] How exactly works the services hierarchy in this Angular 2 application?

问题描述

我在 Angular 2 中非常陌生，并且对以下服务有以下疑问.

I am very new in Angular 2 and I have the following question about services.

进入主视图(与 app.component.ts 类相关的视图)

Into the main view (the one related to the app.component.ts class) I have this situation:

<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 ).

So into this view I have 2 sub component (app-new-account and 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 定义为服务，并将其定义为组件装饰器:

Where I am defining the AccountsService as a service by this line into the component decorator:

providers: [AccountsService]

据我了解，它指定该类为 AccountsService ，必须注册为 AppComponent 主要组件的服务，并为其所有子组件强>.这个说法是对的还是我错过了什么?

From what I have understood it specify that this class is AccountsService have to be registered as service of the AppComponent main component and for all its subcomponent. Is it this assertion true or am I missing something?

因此，这意味着与先前 app-new-account 和 app-account 标记相关的两个子组件类共享同一实例将AccountsService 归类为服务?

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?

这是因为在这2个子请求者的提供者数组中我没有 AccountsService ?

Is this the reason because in the providers array of these 2 sub somponents I have not the AccountsService?

我的原因是正确的还是我遗漏了一些东西?

Is it my reasoninc correct or am I missing something?

推荐答案

因此，这意味着两个子组件类与 以前的app-new-account和app-account标记共享同一实例 作为服务的AccountsService类?

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数组中定义服务.这是喷油器的示意图:

Yes. An injector is created per component instance. Since injector is hierarchical all children of the component access the same instance of the service as the parent. Unless they define a service in its own providers array using the same token. Here is the diagram of injectors:

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

主机元素

我还将在此处提供更多详细信息，因为我认为这在其他地方没有明确解释.进样器在组件/指令宿主元素上创建.这意味着指令将在其所在的宿主元素上创建自己的注入器.

Host elements

I would also provide a bit more details here as I think this is not clearly explained elsewhere. The injector is created on a component/directive host element. It means that a directive creates its own injector on the host element it's placed on.

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

So if you put a directive with providers on the hr element in the AppComponent template:

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

您将具有以下层次结构:

You would have the following hierarchy:

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

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

It means that if somedirectivewithproviders defines AccountsService and injects it, it will get the new instance just as components. But the components will still get the instance from the 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应用程序中的服务层次结构到底如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！