diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index d087cc93cf..36f48bcb82 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -44,7 +44,7 @@ figure.image-display
:marked
When you're done with this page, the app should look like this .
- 运行这部分的在线例子。
+ 完成本章之后,应用会变成这样:在线例子。
include ../../../_includes/_see-addr-bar
@@ -257,7 +257,9 @@ code-example(language="sh" class="code-shell").
:marked
.callout.is-critical
header Remove HeroService from the HeroesComponent providers
+
header 从HeroesComponent的providers中移除HeroService
+
:marked
Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` array.
We are *promoting* this service from the `HeroesComponent` to the root `NgModule`.
@@ -271,8 +273,6 @@ code-example(language="sh" class="code-shell").
The app still runs and displays heroes.
应用仍然在运行,并显示着英雄列表。
- 我们把`AppComponent`重构成了一个新的`AppComponent`和`HeroesComponent`,它们工作得很好!
- 我们毫发无损的完成了这次重构。
:marked
## Add routing
@@ -419,18 +419,23 @@ a#configure-routes
The `RouterLink` directive (another of the `RouterModule` directives) is bound to a string
that tells the router where to navigate when the user clicks the link.
- 注意,锚标签中的`[routerLink]`绑定。
- 我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个字符串。
- 它将告诉路由器,当用户点击这个链接时,应该导航到哪里。Since the link is not dynamic, a routing instructionis defined with a one-time binding to the route path.
- Looking back at the route configuration, you can confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.由于这个链接不是动态的,我们只要用**一次性绑定**的方式绑定到路由的**路径 (path) **就行了。
- 回来看路由配置表,我们清楚的看到,这个路径 —— `'/heroes'`就是指向`HeroesComponent`的那个路由的路径。
- .l-sub-section
- :marked
- Read more about dynamic router links and the link parameters array
- in the [Appendix: Link Parameters Array](../guide/router.html#link-parameters-array) section of the
+ 注意,锚标签中的`[routerLink]`绑定。
+ 我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个字符串。
+ 它将告诉路由器,当用户点击这个链接时,应该导航到哪里。
+
+ Since the link is not dynamic, a routing instructionis defined with a one-time binding to the route path.
+ Looking back at the route configuration, you can confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
+
+ 由于这个链接不是动态的,我们只要用**一次性绑定**的方式绑定到路由的**路径 (path) **就行了。
+ 回来看路由配置表,我们清楚的看到,这个路径 —— `'/heroes'`就是指向`HeroesComponent`的那个路由的路径。
+
+.l-sub-section
+ :marked
+ Read more about dynamic router links and the link parameters array
+ in the [Appendix: Link Parameters Array](../guide/router.html#link-parameters-array) section of the
[Routing & Navigation](../guide/router.html#) page.
- 关于动态路由器链接和*链接参数数组更多信息,见[路由](../guide/router.html#link-parameters-array)。
+ 关于动态路由器链接和*链接参数数组更多信息,见[路由与导航](../guide/router.html#)中的[附录:链接参数数组](../guide/router.html#link-parameters-array)部分。
:marked
Refresh the browser. The browser displays the app title and heroes link, but not the heroes list.
@@ -528,7 +533,7 @@ a#configure-routes
Read more about *redirects* in the [Redirecting routes](../guide/router.html#!#redirect) section
of the [Routing & Navigation](../guide/router.html#) page.
- 关于*重定向*的更多信息,见[路由](../guide/router.html#redirect)。
+ 关于*重定向*的更多信息,见[路由](../guide/router.html#redirect)。
:marked
### Add navigation to the template
@@ -821,7 +826,7 @@ code-example(format="nocode").
extract the `id` parameter value from the `ActivatedRoute` service
and use the `HeroService` to fetch the hero with that `id`.
- 在`ngOnInit`生命周期钩子中,我们从`ActivatedRoute`服务的可观察对象`params`中提取`id`参数,
+ 在`ngOnInit()`生命周期钩子中,我们从`ActivatedRoute`服务的可观察对象`params`中提取`id`参数,
并且使用`HeroService`来获取具有这个`id`的英雄数据。。
+makeExample('toh-5/ts/src/app/hero-detail.component.ts', 'ngOnInit', 'src/app/hero-detail.component.ts')
@@ -830,13 +835,13 @@ code-example(format="nocode").
The `switchMap` operator maps the `id` in the Observable route parameters
to a new `Observable`, the result of the `HeroService.getHero()` method.
- 注意`switchMap`运算符如何将可观察的路由参数中的 id 映射到一个新的`Observable`,
- 即`HeroService.getHero`方法的结果。
+ 注意`switchMap`运算符如何将可观察的路由参数中的 `id` 映射到一个新的`Observable`,
+ 即`HeroService.getHero()`方法的结果。
If a user re-navigates to this component while a `getHero` request is still processing,
`switchMap` cancels the old request and then calls `HeroService.getHero()` again.
- 如果用户在 getHero 请求执行的过程中再次导航这个组件,switchMap 再次调用`HeroService.getHero`之前,
+ 如果用户在 `getHero` 请求执行的过程中再次导航这个组件,`switchMap` 再次调用`HeroService.getHero()`之前,
会取消之前的请求。
:marked
@@ -887,7 +892,7 @@ code-example(format="nocode").
using the `Location` service you injected previously.
要导航到别处,用户可以点击`AppComponent`中的两个链接之一,也可以点击浏览器的后退按钮。
- 我们来添加第三个选项:一个`goBack`方法,它使用之前注入的`Location`服务,
+ 我们来添加第三个选项:一个`goBack()`方法,它使用之前注入的`Location`服务,
利用浏览器的历史堆栈,导航到上一步。
+makeExample('toh-5/ts/src/app/hero-detail.component.ts', 'goBack', 'src/app/hero-detail.component.ts (goBack)')
@@ -997,7 +1002,8 @@ code-example(format="nocode").
establish key facts about the entire app for the Angular compiler.
`AppModule`中有将近 20 行代码是用来配置四个路由的。
- 绝大多数应用有更多路由,并且它们还有[守卫服务](../guide/router.html#guards)来保护不希望或未授权的导航。
+ 绝大多数应用有更多路由,并且它们还有守卫服务来保护不希望或未授权的导航。
+ (要了解守卫服务的更多知识,参见[路由与导航](../guide/router.html)页的[路由守卫](../guide/router.html#guards))
路由的配置可能迅速占领这个模块,并掩盖其主要目的,即为 Angular 编译器设置整个应用的关键配置。
It's a good idea to refactor the routing configuration into its own class.
@@ -1029,7 +1035,7 @@ code-example(format="nocode").
* The Routing Module pulls the routes into a variable. The variable clarifies the
routing module pattern in case you export the module in the future.
- 将路由抽出到一个变量中。你将来可能会导出它,而且它让**路由模块**模式更加明确。
+ 将路由抽出到一个变量中。如果你将来要导出这个模块,这种 "路由模块" 的模式也会更加明确。
* The Routing Module adds `RouterModule.forRoot(routes)` to `imports`.
@@ -1046,7 +1052,7 @@ code-example(format="nocode").
* If you have guard services, the Routing Module adds module `providers`. (There are none in this example.)
- 如果有守卫服务,把它们添加到本模块的`providers`中;本例子无守卫服务。
+ 如果有守卫服务,把它们添加到本模块的`providers`中(本例子中没有守卫服务)。
### Update *AppModule*
@@ -1071,7 +1077,7 @@ code-example(format="nocode").
The revised and simplified `AppModule` is
focused on identifying the key pieces of the app.
- 它更简单,专注于确定应用的关键部分。
+ 这个修改并简化过的`AppModule`版本专注于本应用的关键部分。
.l-main-section
:marked
@@ -1215,7 +1221,7 @@ figure.image-display
by telling the router where to go.
点击按钮时,`HeroesComponent`导航到`HeroDetailComponent`。
- 该按钮的_点击_事件被绑定到`gotoDetail`方法,它使用命令式的导航,告诉路由器去哪儿。
+ 该按钮的点击事件绑定到了`gotoDetail()`方法,它使用命令式的导航,告诉路由器去哪儿。
This approach requires the following changes to the component class:
@@ -1243,7 +1249,7 @@ figure.image-display
Here's the revised `HeroesComponent` class:
注意,我们将一个包含两个元素的**链接参数数组** —
- 路径和路由参数 — 传递到`router.navigate`,
+ 路径和路由参数 — 传递到路由的`navigate()`,
与之前在`DashboardComponent`中使用`[routerLink]`绑定一样。
修改完成的`HeroesComponent`类如下所示:
@@ -1340,7 +1346,9 @@ figure.image-display
:marked
**The *routerLinkActive* directive**
- ***routerLinkActive*指令**The Angular router provides a `routerLinkActive` directive you can use to
+ ***routerLinkActive*指令**
+
+ The Angular router provides a `routerLinkActive` directive you can use to
add a class to the HTML navigation element whose route matches the active route.
All you have to do is define the style for it.
@@ -1352,8 +1360,8 @@ figure.image-display
:marked
Add a `styleUrls` property that refers to this CSS file as follows:
- 首先把`moduleId: module.id`添加到`AppComponent`组件的`@Component`元数据中以启用*相对于模块的*文件URL。
- 然后添加`styleUrls`属性,使其指向这个CSS文件,代码如下:
+ 首先把`moduleId: module.id`添加到`AppComponent`组件的`@Component`元数据中以启用*相对于模块的*文件URL。
+ 然后添加`styleUrls`属性,使其指向这个CSS文件,代码如下:
+makeExample('toh-5/ts/src/app/app.component.ts','styleUrls')