parent
f8956adb73
commit
7ce825011b
@ -1,5 +1,17 @@
|
|||||||
# Navigate the component tree with DI
|
# Navigate the component tree with DI
|
||||||
|
|
||||||
|
<div class="callout is-critical">
|
||||||
|
<header>Marked for archiving</header>
|
||||||
|
|
||||||
|
To ensure that you have the best experience possible, this topic is marked for archiving until we determine
|
||||||
|
that it clearly conveys the most accurate information possible.
|
||||||
|
|
||||||
|
In the meantime, this topic might be helpful: [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
||||||
|
|
||||||
|
If you think this content should not be archived, please file a [GitHub issue](https://github.com/angular/angular/issues/new?template=3-docs-bug.md).
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
Application components often need to share information.
|
Application components often need to share information.
|
||||||
You can often use loosely coupled techniques for sharing information,
|
You can often use loosely coupled techniques for sharing information,
|
||||||
such as data binding and service sharing,
|
such as data binding and service sharing,
|
||||||
@ -170,7 +182,7 @@ Here's *Barry*.
|
|||||||
|
|
||||||
|
|
||||||
*Barry*'s `providers` array looks just like [*Alex*'s](#alex-providers).
|
*Barry*'s `providers` array looks just like [*Alex*'s](#alex-providers).
|
||||||
If you're going to keep writing [*alias providers*](guide/dependency-injection-in-action#useexisting) like this you should create a [helper function](#provideparent).
|
If you're going to keep writing [*alias providers*](guide/dependency-injection-in-action#useexisting) like this you should create a helper function.
|
||||||
|
|
||||||
For now, focus on *Barry*'s constructor.
|
For now, focus on *Barry*'s constructor.
|
||||||
|
|
||||||
@ -244,36 +256,3 @@ It doesn't in this example *only* to demonstrate that the code will compile and
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{@a provideparent}
|
|
||||||
|
|
||||||
|
|
||||||
### `provideParent()` helper function
|
|
||||||
|
|
||||||
Writing variations of the same parent *alias provider* gets old quickly,
|
|
||||||
especially this awful mouthful with a [*forwardRef*](guide/dependency-injection-in-action#forwardref).
|
|
||||||
|
|
||||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" header="dependency-injection-in-action/src/app/parent-finder.component.ts"></code-example>
|
|
||||||
|
|
||||||
You can extract that logic into a helper function like the following.
|
|
||||||
|
|
||||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="provide-the-parent" header="dependency-injection-in-action/src/app/parent-finder.component.ts"></code-example>
|
|
||||||
|
|
||||||
Now you can add a simpler, more meaningful parent provider to your components.
|
|
||||||
|
|
||||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alice-providers" header="dependency-injection-in-action/src/app/parent-finder.component.ts"></code-example>
|
|
||||||
|
|
||||||
|
|
||||||
You can do better. The current version of the helper function can only alias the `Parent` class interface.
|
|
||||||
The application might have a variety of parent types, each with its own class interface token.
|
|
||||||
|
|
||||||
Here's a revised version that defaults to `parent` but also accepts an optional second parameter for a different parent class interface.
|
|
||||||
|
|
||||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="provide-parent" header="dependency-injection-in-action/src/app/parent-finder.component.ts"></code-example>
|
|
||||||
|
|
||||||
|
|
||||||
And here's how you could use it with a different parent type.
|
|
||||||
|
|
||||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="beth-providers" header="dependency-injection-in-action/src/app/parent-finder.component.ts"></code-example>
|
|
||||||
|
@ -243,11 +243,6 @@
|
|||||||
"url": "guide/dependency-injection-in-action",
|
"url": "guide/dependency-injection-in-action",
|
||||||
"title": "DI in Action",
|
"title": "DI in Action",
|
||||||
"tooltip": "Techniques for dependency injection."
|
"tooltip": "Techniques for dependency injection."
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "guide/dependency-injection-navtree",
|
|
||||||
"title": "Navigate the Component Tree",
|
|
||||||
"tooltip": "Use the injection tree to find parent components."
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user