5 lines
18 KiB
JSON
5 lines
18 KiB
JSON
|
{
|
||
|
"id": "guide/dependency-injection-navtree",
|
||
|
"title": "Navigate the component tree with DI",
|
||
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/dependency-injection-navtree.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=\"navigate-the-component-tree-with-di\">Navigate the component tree with DI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-navtree#navigate-the-component-tree-with-di\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"callout is-critical\">\n<header>Marked for archiving</header>\n<p>To ensure that you have the best experience possible, this topic is marked for archiving until we determine\nthat it clearly conveys the most accurate information possible.</p>\n<p>In the meantime, this topic might be helpful: <a href=\"guide/hierarchical-dependency-injection\">Hierarchical injectors</a>.</p>\n<p>If you think this content should not be archived, please file a <a href=\"https://github.com/angular/angular/issues/new?template=3-docs-bug.md\">GitHub issue</a>.</p>\n</div>\n<p>Application components often need to share information.\nYou can often use loosely coupled techniques for sharing information,\nsuch as data binding and service sharing,\nbut sometimes it makes sense for one component to have a direct reference to another component.\nYou need a direct reference, for instance, to access values or call methods on that component.</p>\n<p>Obtaining a component reference is a bit tricky in Angular.\nAngular components themselves do not have a tree that you can\ninspect or navigate programmatically. The parent-child relationship is indirect,\nestablished through the components' <a href=\"guide/glossary#view\">view objects</a>.</p>\n<p>Each component has a <em>host view</em>, and can have additional <em>embedded views</em>.\nAn embedded view in component A is the\nhost view of component B, which can in turn have embedded view.\nThis means that there is a <a href=\"guide/glossary#view-hierarchy\">view hierarchy</a> for each component,\nof which that component's host view is the root.</p>\n<p>There is an API for navigating <em>down</em> the view hierarchy.\nCheck out <code><a href=\"api/core/Query\" class=\"code-anchor\">Query</a></code>, <code><a href=\"api/core/QueryList\" class=\"code-anchor\">QueryList</a></code>, <code><a href=\"api/core/ViewChildren\" class=\"code-anchor\">ViewChildren</a></code>, and <code><a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a></code>\nin the <a href=\"api/\">API Reference</a>.</p>\n<p>There is no public API for acquiring a parent reference.\nHowever, because every component instance is added to an injector's container,\nyou can use Angular dependency injection to reach a parent component.</p>\n<p>This section describes some techniques for doing that.</p>\n<a id=\"find-parent\"></a>\n<a id=\"known-parent\"></a>\n<h3 id=\"find-a-parent-component-of-known-type\">Find a parent component of known type<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dependency-injection-navtree#find-a-parent-component-of-known-type\"><i class=\"material-icons\">link</i></a></h3>\n<p>You use standard class injection to acquire a parent component whose type you know.</p>\n<p>In the following example, the parent <code>AlexComponent</code> has several children including a <code>CathyComponent</code>:</p>\n<a id=\"alex\"></a>\n<code-example path=\"dependency-injection-in-action/src/app/parent-finder.component.ts\" region=\"alex-1\" header=\"parent-finder.component.ts (AlexComponent v.1)\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'alex',\n template: `\n <div class=\"a\">\n <h3>{{name}}</h3>\n <cathy></cathy>\n <craig></craig>\n <carol></carol>\n </div>`,\n})\nexport class AlexComponent
|
||
|
}
|