honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

review of component-communication.jade

Browse Source
This commit is contained in:
Zhimin(Rex) YE 2016-05-14 11:46:26 +01:00
parent 5b81a84a46
commit ff0f4291cc
1 changed files with 116 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
public/docs/ts/latest/cookbook/component-communication.jade
View File

@ -5,7 +5,7 @@ include ../_util-fns
This cookbook contains recipes for common component communication scenarios
in which two or more components share information.
本文包含了当两个或多个组件之间需要共享信息时，常见的组件之间的交互方法。
本食谱包含了常见的组件之间的交互方法，也就是两个或多个组件之间共享信息的方法。
//
.l-sub-section
:marked
@ -20,32 +20,33 @@ include ../_util-fns
## 目录
[Pass data from parent to child with input binding](#parent-to-child)
[使用输入Input绑定，从父级传数据到子级](#parent-to-child)
[Intercept input property changes with a setter](#parent-to-child-setter)
[通过setter截听Input属性值的变化](#parent-to-child-setter)
[Intercept input property changes with *ngOnChanges*](#parent-to-child-on-changes)
[使用*ngOnChanges*截听Input属性值的变化](#parent-to-child-on-changes)
[Parent listens for child event](#child-to-parent)
[父级监听子级事件](#child-to-parent)
[Parent interacts with child via a *local variable*](#parent-to-child-local-var)
[父级与子级通过*本地变量local variable*互动](#parent-to-child-local-var)
[Parent calls a *ViewChild*](#parent-to-view-child)
[父级调用*ViewChild*](#parent-to-view-child)
[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)
[父级和子级通过服务来交互](#bidirectional-service)
[父级调用*ViewChild*Parent calls a *ViewChild*](#parent-to-view-child)
[父级和子级通过服务来交互Parent and children communicate via a service](#bidirectional-service)
:marked
**See the [live example](/resources/live-examples/cb-component-communication/ts/plnkr.html)**.
@ -57,22 +58,19 @@ include ../_util-fns
## Pass data from parent to child with input binding
## 通过Input绑定从父级传送数据给子级。
`HeroChildComponent` has two ***input properties***,
typically adorned with [@Input decorations](../guide/template-syntax.html#inputs-outputs).
`HeroChildComponent` has two ***input properties***, typically adorned with [@Input decorations](../guide/template-syntax.html#inputs-outputs).
`HeroChildComponent` 有两个***Input属性***, 通常被[@Input声明](../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')
:marked
The second `@Input` aliases the child component property name `masterName` as `'master'`.
第二个`@Input`是为子组件的属性名`masterName`起别名为`master`.
第二个`@Input`是为子组件的属性名`masterName`起别名为`master`（译者注：不推荐为起别名，请参见风格指南）.
The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater,
binding its `master` string property to the child's `master` alias
and each iteration's `hero` instance to the child's `hero` property.
父级`HeroParentComponent`把子级 `HeroChildComponent`放到一个 `*ngFor`循环器中，把子级的`master`字符串属性绑定到子级的`master`别名上，并把每个循环的`hero`实例绑定到子级的`hero`属性。
The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater, binding its `master` string property to the child's `master` alias 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')
:marked
@ -86,9 +84,10 @@ figure.image-display
:marked
### Test it
### 测试
E2E test that all children were instantiated and displayed as expected:
端对端测试，以确认所有子级初始化和显示的和我们预期的一样。
实施端对端测试，以确认所有子级的初始化和显示与我们预期的一样。
+makeExample('cb-component-communication/e2e-spec.js', 'parent-to-child')
@ -96,21 +95,21 @@ figure.image-display
[Back to top](#top)
[返回到顶部](#top)
.l-main-section
<a id="parent-to-child-setter"></a>
:marked
## Intercept input property changes with a setter
## 通过setter截听Input属性值的变化Intercept
## 通过setter截听Input属性值的变化
Use an input property setter to intercept and act upon a value from the parent.
使用一个Input属性setter，在父级拦截子级属性，并对属性值变化采取行动。
使用一个Input属性setter，在父级拦截子级属性，并针对属性值的变化采取行动。
The setter of the `name` input property in the child `NameChildComponent`
trims the whitespace from a name and replaces an empty value with default text.
The setter of the `name` input property in the child `NameChildComponent` trims the whitespace from a name and replaces an empty value with default text.
这个在子组件`NameChildComponent`的`name` Input属性的setter，修剪名字里面的空格和替换空值为默认文字。
这个在子组件`NameChildComponent`的Input属性`name`的setter，用来修剪名字里面的空格，并替换空值为默认字符串。
+makeExample('cb-component-communication/ts/app/name-child.component.ts')
@ -142,11 +141,12 @@ figure.image-display
<a id="parent-to-child-on-changes"></a>
:marked
## Intercept input property changes with *ngOnChanges*
## 通过*ngOnChanges*来截听Input属性值得变化
## 通过*ngOnChanges*来截听Input属性值的变化
Detect and act upon changes to input property values with the `ngOnChanges` method of the `OnChanges` lifecycle hook interface.
使用`ngOnChanges`类方法和`OnChanges`生命周期接口来监测Input属性值得变化并回应。
使用`ngOnChanges`函数方法和`OnChanges`生命周期接口来监测Input属性值的变化并做出相应回应。
.l-sub-section
:marked
@ -156,26 +156,26 @@ figure.image-display
Learn about `ngOnChanges` in the [LifeCycle Hooks](../guide/lifecycle-hooks.html) chapter.
在[生命周期钩子](../guide/lifecycle-hooks.html)章节学习更多关于`ngOnChanges`的知识。
到[生命周期钩子](../guide/lifecycle-hooks.html)章节学习更多关于`ngOnChanges`的知识。
:marked
This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes:
这个`VersionChildComponent`监测`major`和`minor`Input属性的变化，并根据这些变化编写一个日志信息报告。
这个`VersionChildComponent`监测Input属性`major`和`minor`的变化，并根据这些变化编写一个日志报告。
+makeExample('cb-component-communication/ts/app/version-child.component.ts')
:marked
The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them.
`VersionParentComponent`提供`minor`和`major`值，将变换它们值的类方法绑定到按钮上。
`VersionParentComponent`提供`minor`和`major`值，将变换它们值的函数方法绑定到按钮上。
+makeExample('cb-component-communication/ts/app/version-parent.component.ts')
:marked
Here's the output of a button-pushing sequence:
下面是按钮被点击的结果。
下面是点击按钮的结果。
figure.image-display
img(src="/resources/images/cookbooks/component-communication/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges")
@ -184,52 +184,47 @@ figure.image-display
### Test it
### 测试
Test that ***both*** input properties are set initially and that button clicks trigger
the expected `ngOnChanges` calls and values:
Test that ***both*** input properties are set initially and that button clicks trigger the expected `ngOnChanges` calls and values:
测试两个Input属性都被初始化并在按钮被点击后，`ngOnChanges`调用和值的变化按预期进行。
测试确认***两个***Input属性值都被初始化了，并在点击按钮后，`ngOnChanges`被调用，属性值的按预期变化。
+makeExample('cb-component-communication/e2e-spec.js', 'parent-to-child-onchanges')
:marked
[Back to top](#top)
[回到顶部](#top)
.l-main-section
<a id="child-to-parent"></a>
:marked
## Parent listens for child event
## 父级监听子级事件
The child component exposes an `EventEmitter` property with which it `emits`events when something happens.
The parent binds to that event property and reacts to those events.
The child component exposes an `EventEmitter` property with which it `emits`events when something happens. The parent binds to that event property and reacts to those events.
子级组件暴露一个`EventEmitter`属性，利用该属性，当有事情发生时，子级组件`散发`事件。父级绑定这个事件属性并作出回应。
子级组件暴露一个`EventEmitter`属性，当事情发生时，子级组件利用该属性`散发`事件。父级绑定这个事件属性，并在事件发生时作出回应。
The child's `EventEmitter` property is an ***output property***,
typically adorned with an [@Output decoration](../guide/template-syntax.html#inputs-outputs)
as seen in this `VoterComponent`:
The child's `EventEmitter` property is an ***output property***, typically adorned with an [@Output decoration](../guide/template-syntax.html#inputs-outputs) as seen in this `VoterComponent`:
子级组件的`EventEmitter`属性是一个**Output属性**，通常被[@Output装饰器](../guide/template-syntax.html#inputs-outputs)来装饰，正如在`VoterComponent`中所见。
子级组件的`EventEmitter`属性是一个**Output属性**，通常用[@Output装饰器](../guide/template-syntax.html#inputs-outputs)来装饰，正如在`VoterComponent`中所见。
+makeExample('cb-component-communication/ts/app/voter.component.ts')
:marked
Clicking a button triggers emission of a `true` or `false` (the boolean *payload*).
点击一个按钮触发一个`true`或`false`的事件（布尔酬载）
点击按钮触发`true`或`false`的事件（布尔酬载）
The parent `VoteTakerComponent` binds an event handler (`onVoted`) that responds to the child event
payload (`$event`) and updates a counter.
The parent `VoteTakerComponent` binds an event handler (`onVoted`) that responds to the child event payload (`$event`) and updates a counter.
父级`VoteTakerComponent`绑定一个事件处理器(`onVoted`)，用来回应子组件时间酬载(`$event`)更新一个计数器。
父级`VoteTakerComponent`绑定一个事件处理器(`onVoted`)，用来回应子组件时间事件(`$event`)并更新一个计数器。
+makeExample('cb-component-communication/ts/app/votetaker.component.ts')
:marked
The framework passes the event argument &mdash; represented by `$event` &mdash; to the handler method,
and the method processes it:
The framework passes the event argument &mdash; represented by `$event` &mdash; to the handler method, and the method processes it:
框架（Angular）传递用`$event`代表的事件参数给事件处理器类方法，由这个类方法来处理：
框架（Angular）传递利用`$event`把事件参数传给事件处理函数方法，由这个函数方法来处理：
figure.image-display
img(src="/resources/images/cookbooks/component-communication/child-to-parent.gif" alt="Child-to-parent")
@ -237,14 +232,16 @@ figure.image-display
:marked
### Test it
### 测试
Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
测试点击*Agree*和*Disagree*按钮时，计数器更新是否正确。
测试验证点击*Agree*和*Disagree*按钮时，计数器更新是否正确。
+makeExample('cb-component-communication/e2e-spec.js', 'child-to-parent')
:marked
[Back to top](#top)
[回到顶部](#top)
parent-to-child-local-var
@ -252,50 +249,40 @@ parent-to-child-local-var
<a id="parent-to-child-local-var"></a>
:marked
## Parent interacts with child via *local variable*
## 父级与子级通过本地变量local variable互动
## 父级与子级通过*本地变量*互动
A parent component cannot use data binding to read child properties
or invoke child methods. We can do both
by creating a template reference variable for the child element
and then reference that variable *within the parent template*
as seen in the following example.
一个父级组件不能使用数据绑定来读取子级属性或者调用子级类方法。我们可以在父级模板里，新建一个本地变量来代表子组件，然后实用这个变量来读取子级属性和调用子级类方法，如下例所示。
A parent component cannot use data binding to read child properties or invoke child methods. We can do both by creating a template reference variable for the child element and then reference that variable *within the parent template* as seen in the following example.
父级组件不能使用数据绑定来读取子级属性或者调用子级函数方法。我们可以在父级模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子级属性和调用子级函数方法，如下例所示。
<a id="countdown-timer-example"></a>
We have a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
It has `start` and `stop` methods that control the clock and it displays a
countdown status message in its own template.
We have a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket. It has `start` and `stop` methods that control the clock and it displays a countdown status message in its own template.
子级组件`CountdownTimerComponent`反复的倒计时，到零时发射一个导弹。`start`和`stop`函数方法控制时间和在自己的模板里面显示倒计时状态信息。
<a id="countdown-timer-example"></a>
我们有一个子级组件`CountdownTimerComponent`，他反复的倒计时到零，然后发射一个导弹。他有一个`start`和`stop`方法，用来控制时间和在自己的模板里面显示一个倒计时状态的信息。
+makeExample('cb-component-communication/ts/app/countdown-timer.component.ts')
:marked
Let's see the `CountdownLocalVarParentComponent` that hosts the timer component.
让我们来看看计时器组件的寄主组件`CountdownLocalVarParentComponent`。
让我们来看看计时器组件的宿主组件`CountdownLocalVarParentComponent`。
+makeExample('cb-component-communication/ts/app/countdown-parent.component.ts', 'lv')
:marked
The parent component cannot data bind to the child's
`start` and `stop` methods nor to its `seconds` property.
The parent component cannot data bind to the child's `start` and `stop` methods nor to its `seconds` property.
父级组件不能数据绑定到子级的`start`和`stop`方法，也不能绑定到子级的`seconds`属性
父级组件不能数据绑定到子级的`start`和`stop`方法，也不能绑定到子级的`seconds`属性。
We can place a local variable (`#timer`) on the tag (`<countdown-timer>`) representing the child component.
That gives us a reference to the child component itself and the ability to access
*any of its properties or methods* from within the parent template.
我们能把本地变量(`#timer`)放到(`<countdown-timer>`)标签中，用来代表子级组件。这样我们就在父级组件获取子级组件的引用载体，在父级组件内访问子级的所有属性和方法。
We can place a local variable (`#timer`) on the tag (`<countdown-timer>`) representing the child component. That gives us a reference to the child component itself and the ability to access *any of its properties or methods* from within the parent template.
我们把本地变量(`#timer`)放到(`<countdown-timer>`)标签中，用来代表子级组件。这样父级组件的模板便获取了子级组件的引用载体，在父级组件模板内访问子级的所有属性和方法。
In this example, we wire parent buttons to the child's `start` and `stop` and
use interpolation to display the child's `seconds` property.
In this example, we wire parent buttons to the child's `start` and `stop` and use interpolation to display the child's `seconds` property.
在这个例子中，我们把父级组件的按钮链接到子级的`start`和`stop`方法，并用插值表达式来显示子级的`seconds`属性。
在这个例子中，我们把父级组件的按钮绑定到子级的`start`和`stop`方法，并用插值表达式来显示子级的`seconds`属性。
Here we see the parent and child working together.
在这里我们看到父级和子级一起工作。
下面是父级和子级一起工作的结果。
figure.image-display
img(src="/resources/images/cookbooks/component-communication/countdown-timer-anim.gif" alt="countdown timer")
@ -305,16 +292,15 @@ a(id="countdown-tests")
### Test it
### 测试
Test that the seconds displayed in the parent template
match the seconds displayed in the child's status message.
Test also that clicking the *Stop* button pauses the countdown timer:
测试在父级模板中显示的秒钟和子级组件里的状态信息里面的秒钟的对应。
Test that the seconds displayed in the parent template match the seconds displayed in the child's status message. Test also that clicking the *Stop* button pauses the countdown timer:
测试确认在父级模板中显示的秒钟和子级组件里的状态信息里面的秒钟同步：
+makeExample('cb-component-communication/e2e-spec.js', 'countdown-timer-tests')
:marked
[Back to top](#top)
[回到顶部](#top)
.l-main-section
@ -323,38 +309,33 @@ a(id="countdown-tests")
## Parent calls a *ViewChild*
## 父级调用*ViewChild*
The *local variable* approach is simple and easy. But it is limited because
the parent-child wiring must be done entirely within the parent template.
The parent component *itself* has no access to the child.
The *local variable* approach is simple and easy. But it is limited because the parent-child wiring must be done entirely within the parent template. The parent component *itself* has no access to the child.
上面*本地变量*的方法是一个简单和方便的方法。但是它有局限性，因为父级-子级的连接必须要全部都在父级的模板里面进行。父级组件本身对子级没有访问权。
上面*本地变量*的方法是一个简单和便利的方法。但是它有局限性，因为父级-子级的连接必须要全部都在父级的模板里面进行。父级组件本身对子级没有访问权。
We can't use the *local variable* technique if an instance of the parent component *class*
must read or write child component values or must call child component methods.
We can't use the *local variable* technique if an instance of the parent component *class* must read or write child component values or must call child component methods.
如果父级组件的*类*需要读或取子级组件值或者调用子级组件的方法，我们就不能使用*本地变量*方法。
如果父级组件的*类*需要读取子级组件的属性值或者调用子级组件的函数方法，我们就不能使用*本地变量*方法。
When the parent component *class* requires that kind of access,
we ***inject*** the child component into the parent as a *ViewChild*.
When the parent component *class* requires that kind of access, we ***inject*** the child component into the parent as a *ViewChild*.
当父级组件*类*需要这种访问，我们把一个子级组件作为*ViewChild*，***注入***到父级组件里面。
当父级组件*类*需要这种访问时，我们把子级组件作为*ViewChild*，***注入***到父级组件里面。
We'll illustrate this technique with the same [Countdown Timer](#countdown-timer-example) example.
We won't change its appearance or behavior.
The child [CountdownTimerComponent](#countdown-timer-example) is the same as well.
We'll illustrate this technique with the same [Countdown Timer](#countdown-timer-example) example. We won't change its appearance or behavior. The child [CountdownTimerComponent](#countdown-timer-example) is the same as well.
我们将会用一样的[倒计时](#countdown-timer-example)例子来解释这个技巧。我们没有变化它的样子或行为。子级[CountdownTimerComponent](#countdown-timer-example)和原来也一样。
我们将会用一样的[倒计时](#countdown-timer-example)例子来解释这种技巧。
我们不会变化它的样子或行为。子级[CountdownTimerComponent](#countdown-timer-example)和原来也一样。
.l-sub-section
:marked
We are switching from the *local variable* to the *ViewChild* technique
solely for the purpose of demonstration.
We are switching from the *local variable* to the *ViewChild* technique solely for the purpose of demonstration.
我们由*本地变量*切换到*ViewChild*技巧的唯一目的是做一个示范。
我们由*本地变量*切换到*ViewChild*技巧的唯一目的是做示范。
:marked
Here is the parent, `CountdownViewChildParentComponent`:
这个是父级，`CountdownViewChildParentComponent`:
下面是父级`CountdownViewChildParentComponent`:
+makeExample('cb-component-communication/ts/app/countdown-parent.component.ts', 'vc')
:marked
It takes a bit more work to get the child view into the parent component classs.
@ -363,46 +344,39 @@ a(id="countdown-tests")
We import references to the `ViewChild` decorator and the `AfterViewInit` lifecycle hook.
我们导入`ViewChild`装饰器和应用`AfterViewInit`生命周期钩子。
我们需要通过`ViewChild`装饰器导入引用，并应用`AfterViewInit`生命周期钩子。
We inject the child `CountdownTimerComponent` into the private `_timerComponent` property
via the `@ViewChild` property decoration.
We inject the child `CountdownTimerComponent` into the private `_timerComponent` property via the `@ViewChild` property decoration.
我们通过`@ViewChild`属性装饰器，将子级`CountdownTimerComponent`注入到私有属性`_timerComponent`里面。
The `#timer` local variable is gone from the component metadata.
Instead we bind the buttons to the parent component's own `start` and `stop` methods and
present the ticking seconds in an interpolation around the parent component's `seconds` method.
The `#timer` local variable is gone from the component metadata. Instead we bind the buttons to the parent component's own `start` and `stop` methods and present the ticking seconds in an interpolation around the parent component's `seconds` method.
我们在组件元素据里面就不需要`#timer`本地变量了。取而代之，我们把按钮绑定到父级组件自己的`start`和`stop`方法，在一个父级组件的`seconds`方法的插值表达式中展示秒钟变化。
组件元数据里便不需要`#timer`本地变量了。取而代之，我们把按钮绑定到父级组件自己的`start`和`stop`方法，使用父级组件的`seconds`方法的插值表达式来展示秒钟变化。
These methods access the injected timer component directly.
这些类方法直接访问插入的计时器组件。
这些函数方法直接访问被注入的计时器组件。
The `ngAfterViewInit` lifecycle hook is an important wrinkle.
The timer component isn't available until *after* Angular displays the parent view.
So we display `0` seconds initially.
The `ngAfterViewInit` lifecycle hook is an important wrinkle. The timer component isn't available until *after* Angular displays the parent view. So we display `0` seconds initially.
`ngAfterViewInit`生命周期钩子是一个非常重要的技巧。计时器组件只在Angular显示了父级视图之后才可以被访问，所以我们先显示秒钟为0.
`ngAfterViewInit`生命周期钩子是一个非常重要的步骤。被注入的计时器组件只在Angular显示了父级视图之后才可以被访问，所以我们先显示秒钟为0.
Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late*
to update the parent view's display of the countdown seconds.
Angular's unidirectional data flow rule prevents us from updating the parent view's
in the same cycle. We have to *wait one turn* before we can display the seconds.
Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late* to update the parent view's display of the countdown seconds. Angular's unidirectional data flow rule prevents us from updating the parent view's in the same cycle. We have to *wait one turn* before we can display the seconds.
然后Angular调用`ngAfterViewInit`生命周期钩子，但是这时候更新父级视图的倒计时就已经太晚了。Angular的单向数据流动规则防止在我们同一个周期更新父级视图。我们在显示秒钟之前需要被迫*等待一轮*。
然后Angular调用`ngAfterViewInit`生命周期钩子，但是这时候再更新父级视图的倒计时就已经太晚了。Angular的单向数据流动规则防止我们在同一个周期内更新父级视图。我们在显示秒钟之前需要被迫*等待一轮*。
We use `setTimeout` to wait one tick and then revise the `seconds` method so
that it takes future values from the timer component.
We use `setTimeout` to wait one tick and then revise the `seconds` method so that it takes future values from the timer component.
我们使用`setTimeout`来等待一轮，然后重组`seconds`方法，这样它接下来从计时器组件里面获取秒钟的值。
我们使用`setTimeout`来等待一轮，然后重组`seconds`方法，这样它接下来从注入的计时器组件里面获取秒钟的值。
### Test it
## 测试
Use [the same countdown timer tests](#countdown-tests) as before.
使用之前的[一样的倒计时测试](#countdown-tests)。
:marked
[Back to top](#top)
@ -414,15 +388,13 @@ a(id="countdown-tests")
## Parent and children communicate via a service
## 父级和子级通过服务来交互
A parent component and its children share a service whose interface enables bi-directional communication
*within the family*.
A parent component and its children share a service whose interface enables bi-directional communication *within the family*.
一个父级组件和它的子级组件共享一个服务，这个服务的接口*在本家庭之内*实现双向交互能力。
父级组件和它的子级组件共享一个服务，利用该服务*在本家庭之内*实现双向交互。
The scope of the service instance is the parent component and its children.
Components outside this component subtree have no access to the service or their communications.
The scope of the service instance is the parent component and its children. Components outside this component subtree have no access to the service or their communications.
该服务实例的作用范围限制在父级组件和其子级组件内。在这个组件子树之外的组件无法访问该服务或者它们之间的交互。
该服务实例的作用范围被限制在父级组件和其子级组件内。在这个组件子树之外的组件无法访问该服务或者它们之间的交互。
This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children.
@ -430,42 +402,33 @@ a(id="countdown-tests")
+makeExample('cb-component-communication/ts/app/mission.service.ts')
:marked
The `MissionControlComponent` both provides the instance of the service that it shares with its children
(through the `providers` metadata array) and injects that instance into itself through its constructor:
The `MissionControlComponent` both provides the instance of the service that it shares with its children (through the `providers` metadata array) and injects that instance into itself through its constructor:
`MissionControlComponent`同时提供服务的实例并共享给它的子级（通过`providers`元素据数组），和通过自身的构造函数将该实例注入给自己。
`MissionControlComponent`提供服务的实例，将其共享给它的子级（通过`providers`元数据数组），并通过自身的构造函数将该实例注入给自己。
+makeExample('cb-component-communication/ts/app/missioncontrol.component.ts')
:marked
The `AstronautComponent` also injects the service in its constructor.
Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance:
The `AstronautComponent` also injects the service in its constructor. Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance:
`AstronautComponent`也通过自己的构造函数注入该服务。
每个`AstronautComponent`都是`MissionControlComponent`的子级，所以它们获取它们父级的服务的实例。
`AstronautComponent`也通过自己的构造函数注入该服务。每个`AstronautComponent`都是`MissionControlComponent`的子级，所以它们获取它们父级的服务的实例。
+makeExample('cb-component-communication/ts/app/astronaut.component.ts')
.l-sub-section
:marked
Notice that we capture the `subscription` and unsubscribe when the `AstronautComponent` is destroyed.
This is a memory-leak guard step. There is no actual risk in this app because the
lifetime of a `AstronautComponent` is the same as the lifetime of the app itself.
That *would not* always be true in a more complex application.
Notice that we capture the `subscription` and unsubscribe when the `AstronautComponent` is destroyed. This is a memory-leak guard step. There is no actual risk in this app because the lifetime of a `AstronautComponent` is the same as the lifetime of the app itself. That *would not* always be true in a more complex application.
注意，我们通过`subscription`获取任务，并在`AstronautComponent`被销毁的时候退订。这是一个防止内存泄漏的保护措施。在这个应用程序中，实际上没有这个风险，因为`AstronautComponent`的生命期和应用程序的生命期一样。
但是在更复杂的应用程序中就不一定了。
注意，我们通过`subscription`获取任务，并在`AstronautComponent`被销毁的时候退订。这是一个防止内存泄漏的保护措施。实际上，在这个应用程序中没有这个风险，因为`AstronautComponent`的生命期和应用程序的生命期一样。但是在更复杂的应用程序环境中就不一定了。
We do not add this guard to the `MissionControlComponent` because, as the parent,
it controls the lifetime of the `MissionService`.
We do not add this guard to the `MissionControlComponent` because, as the parent, it controls the lifetime of the `MissionService`.
我们不需要在`MissionControlComponent`中添加这个保护措施，因为作为父级，它控制`MissionService`的生命期。
我们不需要在`MissionControlComponent`中添加这个保护措施，因为作为父级，他控制`MissionService`的生命期。
:marked
The *History* log demonstrates that messages travel in both directions between
the parent `MissionControlComponent` and the `AstronautComponent` children,
facilitated by the service:
The *History* log demonstrates that messages travel in both directions between the parent `MissionControlComponent` and the `AstronautComponent` children, facilitated by the service:
*History*日志展示了信息在父级`MissionControlComponent`和子级`AstronautComponent`之间，通过该服务双向传递。
*History*日志证明了在父级`MissionControlComponent`和子级`AstronautComponent`之间，信息通过该服务实现了双向传递。
figure.image-display
img(src="/resources/images/cookbooks/component-communication/bidirectional-service.gif" alt="bidirectional-service")
@ -473,10 +436,10 @@ figure.image-display
:marked
### Test it
### 测试
Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
and verify that the *History* meets expectations:
测试点击父级`MissionControlComponent`和子级`AstronautComponent`两个的组件的按钮，确认*History*日志和预期的一样。
Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children and verify that the *History* meets expectations:
测试检查点击父级`MissionControlComponent`和子级`AstronautComponent`两个的组件的按钮时，*History*日志和预期的一样。
+makeExample('cb-component-communication/e2e-spec.js', 'bidirectional-service')