5 lines
42 KiB
JSON
5 lines
42 KiB
JSON
|
{
|
||
|
|
"id": "guide/component-interaction",
|
||
|
|
"title": "Component interaction",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/component-interaction.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=\"component-interaction\">Component interaction<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-interaction#component-interaction\"><i class=\"material-icons\">link</i></a></h1>\n<a id=\"top\"></a>\n<p>This cookbook contains recipes for common component communication scenarios\nin which two or more components share information.\n<a id=\"toc\"></a></p>\n<!--\n\n# Contents\n\n* [Pass data from parent to child with input binding](guide/component-interaction#parent-to-child)\n* [Intercept input property changes with a setter](guide/component-interaction#parent-to-child-setter)\n* [Intercept input property changes with `ngOnChanges()`](guide/component-interaction#parent-to-child-on-changes)\n* [Parent calls an `@ViewChild()`](guide/component-interaction#parent-to-view-child)\n* [Parent and children communicate via a service](guide/component-interaction#bidirectional-service)\n\n-->\n<p><strong>See the <live-example name=\"component-interaction\"></live-example></strong>.</p>\n<a id=\"parent-to-child\"></a>\n<h2 id=\"pass-data-from-parent-to-child-with-input-binding\">Pass data from parent to child with input binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-interaction#pass-data-from-parent-to-child-with-input-binding\"><i class=\"material-icons\">link</i></a></h2>\n<p><code>HeroChildComponent</code> has two <strong><em>input properties</em></strong>,\ntypically adorned with <a href=\"guide/inputs-outputs#input\">@Input() decorator</a>.</p>\n<code-example path=\"component-interaction/src/app/hero-child.component.ts\" header=\"component-interaction/src/app/hero-child.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a> } from '@angular/core';\n\nimport { Hero } from './hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-child',\n template: `\n <h3>{{hero.name}} says:</h3>\n <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>\n `\n})\nexport class HeroChildComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() hero: Hero;\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>('master') masterName: string; // tslint:disable-line: no-input-rename\n}\n\n</code-example>\n<p>The second <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a></code> aliases the child component property name <code>masterName</code> as <code>'master'</code>.</p>\n<p>The <code>HeroParentComponent</code> nests the child <code>HeroChildComponent</code> inside an <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> repeater,\nbinding its <code>master</code> string property to the child's <code>master</code> alias,\nand each iteration's <code>hero</code> instance to the child's <code>hero</code> property.</p>\n<code-example path=\"component-interaction/src/app/hero-parent.component.ts\" header=\"component-interaction/src/app/hero-parent.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\nimport { HEROES } from './hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-hero-parent',\n template: `\n <h2>{{master}} controls {{heroes.length}} heroes</h2>\n <app-hero-child *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\"\n [hero]=\"hero\"\n [master]=\"master\">\n </app-hero-child>\n `\n})\nexport class HeroParentComponent {\n heroes = HEROES;\n mas
|
||
|
|
}
|