just started component-communication.

This commit is contained in:
Zhimin(Rex) YE 2016-04-17 21:52:03 +01:00
parent bc9f46722f
commit 60d4b32064
2 changed files with 30 additions and 2 deletions

View File

@ -5,15 +5,19 @@ include ../_util-fns
This cookbook contains recipes for common component communication scenarios This cookbook contains recipes for common component communication scenarios
in which two or more components share information. in which two or more components share information.
本文包含了当两个或多个组件之间需要共享信息时,常见的组件之间的交互方法。
// //
.l-sub-section .l-sub-section
:marked :marked
For an in-depth look at each fundamental concepts in component communication, we can find detailed description and For an in-depth look at each fundamental concepts in component communication, we can find detailed description and
samples in the [Component Communication]() document. samples in the [Component Communication]() document.
要深度的了解组件交互的每个基本概念在,我们可以在[组件交互Component Communication]()文档中可以找到详细的描述和例子。
<a id="toc"></a> <a id="toc"></a>
:marked :marked
## Table of contents ## Table of contents
## 目录
[Pass data from parent to child with input binding](#parent-to-child) [Pass data from parent to child with input binding](#parent-to-child)
@ -29,29 +33,53 @@ include ../_util-fns
[Parent and children communicate via a service](#bidirectional-service) [Parent and children communicate via a service](#bidirectional-service)
[使用输入Input绑定从父级传数据到子级Pass data from parent to child with input binding](#parent-to-child)
[通过setter截听Input属性值的变化Intercept input property changes with a setter](#parent-to-child-setter)
[使用*ngOnChanges*截听Input属性值的变化Intercept input property changes with *ngOnChanges*](#parent-to-child-on-changes)
[父级监听子级事件Parent listens for child event](#child-to-parent)
[父级与子级通过*本地变量local variable*互动Parent interacts with child via a *local variable*](#parent-to-child-local-var)
[父级调用一个*ViewChild*Parent calls a *ViewChild*](#parent-to-view-child)
[父级和子级通过一个服务来交互Parent and children communicate via a service](#bidirectional-service)
:marked :marked
**See the [live example](/resources/live-examples/cb-component-communication/ts/plnkr.html)**. **See the [live example](/resources/live-examples/cb-component-communication/ts/plnkr.html)**.
**请看[在线例子](/resources/live-examples/cb-component-communication/ts/plnkr.html)**
.l-main-section .l-main-section
<a id="parent-to-child"></a> <a id="parent-to-child"></a>
:marked :marked
## Pass data from parent to child with input binding ## Pass data from parent to child with input binding
## 通过Input绑定从父级传送数据给子级。
`HeroChildComponent` has two ***input properties***, `HeroChildComponent` has two ***input properties***,
typically adorned with [@Input decorations](../guide/template-syntax.html#inputs-outputs). typically adorned with [@Input decorations](../guide/template-syntax.html#inputs-outputs).
`HeroChildComponent` 有两个***Input属性***, 通常被[@Input声明](../guide/template-syntax.html#inputs-outputs)装饰
+makeExample('cb-component-communication/ts/app/hero-child.component.ts') +makeExample('cb-component-communication/ts/app/hero-child.component.ts')
:marked :marked
The second `@Input` aliases the child component property name `masterName` as `'master'`. The second `@Input` aliases the child component property name `masterName` as `'master'`.
第二个`@Input`是为子组件的属性名`masterName`起别名为`master`.
The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater, The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater,
binding its `master` string property to the child's `master` alias binding its `master` string property to the child's `master` alias
and each iteration's `hero` instance to the child's `hero` property. and each iteration's `hero` instance to the child's `hero` property.
父级`HeroParentComponent`把子级 `HeroChildComponent`放到一个 `*ngFor`循环器中,把子级的`master`字符串属性绑定到子级的`master`别名上,并把每个循环的`hero`实例绑定到子级的`hero`属性。
+makeExample('cb-component-communication/ts/app/hero-parent.component.ts') +makeExample('cb-component-communication/ts/app/hero-parent.component.ts')
:marked :marked
The running application displays three heroes: The running application displays three heroes:
运行的应用程序显示三个英雄:
figure.image-display figure.image-display
img(src="/resources/images/cookbooks/component-communication/parent-to-child.png" alt="Parent-to-child") img(src="/resources/images/cookbooks/component-communication/parent-to-child.png" alt="Parent-to-child")

View File

@ -861,7 +861,7 @@ include _util-fns
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
good examples in this category. good examples in this category.
`ngIf`"有条件的元素conditional element"指令和 `ngFor` "中继器repeater"指令是很好的结构型指令。 `ngIf`"有条件的元素conditional element"指令和 `ngFor` "循环器repeater"指令是很好的结构型指令。
// #enddocregion n-s // #enddocregion n-s