5 lines
54 KiB
JSON
5 lines
54 KiB
JSON
|
{
|
||
|
|
"id": "guide/dependency-injection-in-action",
|
||
|
|
"title": "Dependency injection in action",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/dependency-injection-in-action.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=\"dependency-injection-in-action\">Dependency injection in action<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-in-action#dependency-injection-in-action\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide explores many of the features of dependency injection (DI) in Angular.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<a id=\"multiple-service-instances\"></a>\n<h2 id=\"multiple-service-instances-sandboxing\">Multiple service instances (sandboxing)<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-in-action#multiple-service-instances-sandboxing\"><i class=\"material-icons\">link</i></a></h2>\n<p>Sometimes you want multiple instances of a service at <em>the same level</em> of the component hierarchy.</p>\n<p>A good example is a service that holds state for its companion component instance.\nYou need a separate instance of the service for each component.\nEach service has its own work-state, isolated from the service-and-state of a different component.\nThis is called <em>sandboxing</em> because each service and component instance has its own sandbox to play in.</p>\n<a id=\"hero-bios-component\"></a>\n<p>In this example, <code>HeroBiosComponent</code> presents three instances of <code>HeroBioComponent</code>.</p>\n<code-example path=\"dependency-injection-in-action/src/app/hero-bios.component.ts\" region=\"simple\" header=\"ap/hero-bios.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-bios',\n template: `\n <app-hero-bio [heroId]=\"1\"></app-hero-bio>\n <app-hero-bio [heroId]=\"2\"></app-hero-bio>\n <app-hero-bio [heroId]=\"3\"></app-hero-bio>`,\n providers: [HeroService]\n})\nexport class HeroBiosComponent {\n}\n\n</code-example>\n<p>Each <code>HeroBioComponent</code> can edit a single hero's biography.\n<code>HeroBioComponent</code> relies on <code>HeroCacheService</code> to fetch, cache, and perform other persistence operations on that hero.</p>\n<code-example path=\"dependency-injection-in-action/src/app/hero-cache.service.ts\" region=\"service\" header=\"src/app/hero-cache.service.ts\">\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class HeroCacheService {\n hero: Hero;\n constructor(private heroService: HeroService) {}\n\n fetchCachedHero(id: number) {\n if (!this.hero) {\n this.hero = this.heroService.getHeroById(id);\n }\n return this.hero;\n }\n}\n\n</code-example>\n<p>Three instances of <code>HeroBioComponent</code> can't share the same instance of <code>HeroCacheService</code>,\nas they'd be competing with each other to determine which hero to cache.</p>\n<p>Instead, each <code>HeroBioComponent</code> gets its <em>own</em> <code>HeroCacheService</code> instance\nby listing <code>HeroCacheService</code> in its metadata <code>providers</code> array.</p>\n<code-example path=\"dependency-injection-in-action/src/app/hero-bio.component.ts\" region=\"component\" header=\"src/app/hero-bio.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-bio',\n template: `\n <h4>{{hero.name}}</h4>\n <ng-content></ng-content>\n <<a href=\"api/forms/DefaultValueAccessor\" class=\"code-anchor\">textarea</a> cols=\"25\" [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"hero.description\"></<a href=\"api/forms/DefaultValueAccessor\" class=\"c
|
||
|
|
}
|