5 lines
79 KiB
JSON
5 lines
79 KiB
JSON
|
{
|
||
|
|
"id": "guide/hierarchical-dependency-injection",
|
||
|
|
"title": "Hierarchical injectors",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/hierarchical-dependency-injection.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"hierarchical-injectors\">Hierarchical injectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/hierarchical-dependency-injection#hierarchical-injectors\"><i class=\"material-icons\">link</i></a></h1>\n<p>Injectors in Angular have rules that you can leverage to\nachieve the desired visibility of injectables in your apps.\nBy understanding these rules, you can determine in which\nNgModule, Component or Directive you should declare a provider.</p>\n<h2 id=\"two-injector-hierarchies\">Two injector hierarchies<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/hierarchical-dependency-injection#two-injector-hierarchies\"><i class=\"material-icons\">link</i></a></h2>\n<p>There are two injector hierarchies in Angular:</p>\n<ol>\n<li><code>ModuleInjector</code> hierarchy—configure a <code>ModuleInjector</code>\nin this hierarchy using an <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>()</code> or <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> annotation.</li>\n<li><code>ElementInjector</code> hierarchy—created implicitly at each\nDOM element. An <code>ElementInjector</code> is empty by default\nunless you configure it in the <code>providers</code> property on\n<code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>()</code> or <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>()</code>.</li>\n</ol>\n<a id=\"register-providers-injectable\"></a>\n<h3 id=\"moduleinjector\"><code>ModuleInjector</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/hierarchical-dependency-injection#moduleinjector\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <code>ModuleInjector</code> can be configured in one of two ways:</p>\n<ul>\n<li>Using the <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> <code>providedIn</code> property to\nrefer to <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>()</code>, or <code>root</code>.</li>\n<li>Using the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>()</code> <code>providers</code> array.</li>\n</ul>\n<div class=\"is-helpful alert\">\n<h4 id=\"tree-shaking-and-injectable\">Tree-shaking and <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/hierarchical-dependency-injection#tree-shaking-and-injectable\"><i class=\"material-icons\">link</i></a></h4>\n<p>Using the <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> <code>providedIn</code> property is preferable\nto the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>()</code> <code>providers</code>\narray because with <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</code> <code>providedIn</code>, optimization\ntools can perform\ntree-shaking, which removes services that your app isn't\nusing and results in smaller bundle sizes.</p>\n<p>Tree-shaking is especially useful for a library\nbecause the application which uses the library may not have\na need to inject it. Read more\nabout <a href=\"guide/architecture-services#providing-services\">tree-shakable providers</a>\nin <a href=\"guide/architecture-services\">Introduction to services and dependency injection</a>.</p>\n</div>\n<p><code>ModuleInjector</code> is configured by the <code>@<a href=\"api/core/NgModule#providers\" class=\"code-anchor\">NgModule.providers</a></code> and\n<code><a href=\"api/core/NgMod
|
||
|
|
}
|