patch: toh-pt5

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -19,11 +19,11 @@ block includes
 
   * Add a *Dashboard* view.
 
-  * 添加一个*仪表盘*视图。
+  * 添加一个*控制台*视图。
 
   * Navigate between the *Heroes* and *Dashboard* views.
 
-  * 在*英雄列表*和*仪表盘*视图之间导航。
+  * 在*英雄列表*和*控制台*视图之间导航。
 
   * Clicking on a hero in either view navigates to a detail view of the selected hero.
 
@@ -141,7 +141,7 @@ code-example(language="bash").
 
   * Tie the *Dashboard* into the navigation structure
 
-  * 把*仪表盘*加入导航结构中。
+  * 把*控制台*加入导航结构中。
 
 .l-sub-section
   :marked
@@ -161,7 +161,7 @@ code-example(language="bash").
 
   Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
 
-  我们修改后的应用将提供一个壳，它会选择*仪表盘*和*英雄列表*视图之一，然后默认显示它。
+  我们修改后的应用将提供一个壳，它会选择*控制台*和*英雄列表*视图之一，然后默认显示它。
 
   The `AppComponent` should only handle navigation.
   Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
@@ -509,7 +509,7 @@ block routerLink
 :marked
   ## Add a *Dashboard*
 
-  ## 添加一个*仪表盘*
+  ## 添加一个*控制台*
 
   Routing only makes sense when we have multiple views. We need another view.
 
@@ -527,11 +527,11 @@ block routerLink
 
   ### Configure the dashboard route
 
-  ### 配置仪表盘路由
+  ### 配置控制台路由
 
   Go back to `!{_appRoutingTsVsAppComp}` and teach it to navigate to the dashboard.
 
-  回到`!{_appRoutingTsVsAppComp}`，我们得教它如何导航到这个仪表盘。
+  回到`!{_appRoutingTsVsAppComp}`，我们得教它如何导航到这个控制台。
 
   Import the dashboard component and
   add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
@@ -559,7 +559,7 @@ block routerLink
   we want to see a nice URL in the browser address bar that says `/dashboard`.
   Remember that the browser launches with `/` in the address bar.
 
-  我们希望在应用启动的时候就显示仪表盘，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。
+  我们希望在应用启动的时候就显示控制台，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。
   记住，浏览器启动时，在地址栏中使用的路径是`/`。
   我们可以使用一个重定向路由来达到目的。
   
@@ -585,7 +585,7 @@ block redirect-vs-use-as-default
 
   Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
 
-  最后，在模板上添加一个到仪表盘的导航链接，就放在*英雄(Heroes)*链接的上方。
+  最后，在模板上添加一个到控制台的导航链接，就放在*英雄(Heroes)*链接的上方。
   
 - var _vers = _docsFor == 'dart' ? '' : '.1'
 +makeExcerpt('app/app.component' + _vers + '.ts', 'template-v3')
@@ -602,12 +602,12 @@ block redirect-vs-use-as-default
   To see these changes in your browser, go to the application root (`/`) and reload.
   The app displays the dashboard and we can navigate between the dashboard and the heroes.
 
-  刷新浏览器。应用显示出了仪表盘，并可以在仪表盘和英雄列表之间导航了。
+  刷新浏览器。应用显示出了控制台，并可以在控制台和英雄列表之间导航了。
   ## Dashboard Top Heroes
-  ## 仪表盘上的顶级英雄
+  ## 控制台上的顶级英雄
   Let’s spice up the dashboard by displaying the top four heroes at a glance.
 
-  我们想让仪表盘更有趣，比如：一眼就能看到四个顶级英雄。
+  我们想让控制台更有趣，比如：一眼就能看到四个顶级英雄。
 
   Replace the `template` metadata with a `templateUrl` property that points to a new
   template file.
@@ -699,7 +699,7 @@ block redirect-vs-use-as-default
 
   Refresh the browser and see four heroes in the new dashboard.
 
-  刷新浏览器，在这个新的仪表盘中就看到了四个英雄。
+  刷新浏览器，在这个新的控制台中就看到了四个英雄。
 
 .l-main-section
 :marked
@@ -714,7 +714,7 @@ block redirect-vs-use-as-default
 
   1. from the *Dashboard* to a selected hero.
 
-  1. 从*仪表盘(Dashboard)*导航到一个选定的英雄。
+  1. 从*控制台(Dashboard)*导航到一个选定的英雄。
 
   1. from the *Heroes* list to a selected hero.
 
@@ -811,7 +811,7 @@ code-example(format='').
   They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
 
   我们没有往模板中添加一个`'英雄详情'`，这是因为用户不会直接点击导航栏中的链接去查看一个特定的英雄。
-  它们只会通过在英雄列表或者仪表盘中点击来显示一个英雄。
+  它们只会通过在英雄列表或者控制台中点击来显示一个英雄。
 
   We'll get to those *hero* clicks later in the chapter.
   There's no point in working on them until the `HeroDetailComponent`
@@ -989,32 +989,44 @@ block extract-id
 :marked
   ## Select a *Dashboard* Hero
 
-  ## 选择一个*仪表盘*中的英雄
+  ## 选择一个*控制台*中的英雄
 
   When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
 
-  当用户从仪表盘中选择了一位英雄时，本应用要导航到`HeroDetailComponent`以查看和编辑所选的英雄。
+  当用户从控制台中选择了一位英雄时，本应用要导航到`HeroDetailComponent`以查看和编辑所选的英雄。
   
   Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
   When hovering over a hero block, the target URL should display in the browser status bar 
-  and the user should be able to copy the link or open the hero detail view in a new tab.  
+  and the user should be able to copy the link or open the hero detail view in a new tab.
+
+  虽然控制台英雄被显示为像按钮一样的方块，但是它们的行为应该像锚标签一样。
+  当鼠标移动到一个英雄方块上时，目标URL应该显示在浏览器的状态条上，用户应该能拷贝链接或者在新的浏览器标签中打开英雄详情视图。
 
   To achieve this effect, reopen the `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
   with `<a>` tags. The opening `<a>` tag looks like this:
 
+  要达到这个效果，再次打开`dashboard.component.html`，将用来迭代的`<div *ngFor...>`替换为`<a>`，就像这样：
+
 +makeExample('app/dashboard.component.html', 'click', 'app/dashboard.component.html (repeated <a> tag)')
 
 :marked
   Notice the `[routerLink]` binding.
 
+  注意`[routerLink]`绑定。
+
   In the top level navigation in the [`AppComponent`
   template](#router-links) has router links set to fixed !{_pathVsName}s of the
   destination routes, "/dashboard" and "/heroes".
+
+  [`AppComponent`模板](#router-links)中的顶级导航有一些路由器链接被设置固定的路径，例如"/dashboard" and "/heroes"。
   
   This time, we're binding to an expression containing a **link parameters !{_array}**.
   The !{_array} has two elements, the ***!{_pathVsName}*** of
   the destination route and a ***route parameter*** set to the value of the current hero's `id`.
 
+  这次，我们绑定了一个包含**链接参数数组**的表达式。
+  该数组有两个元素，目的路由的路径和一个用来设置当前英雄的id值的**路由参数**。
+
   The two !{_array} items align with the ***!{_pathVsName}*** and ***:id***
   token in the parameterized hero detail route definition we added to
   `!{_appRoutingTsVsAppComp}` earlier in the chapter:
@@ -1027,7 +1039,7 @@ block extract-id
 :marked
   Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
   
-  刷新浏览器，并从仪表盘中选择一位英雄，应用就会直接导航到英雄的详情。
+  刷新浏览器，并从控制台中选择一位英雄，应用就会直接导航到英雄的详情。
   
 .l-main-section
 :marked
@@ -1149,7 +1161,7 @@ block extract-id
   We're going to display the hero detail on its own page and route to it as we did in the dashboard.
 
   这里我们不再展示完整的`HeroDetailComponent`了。
-  我们要在它自己的页面中显示英雄详情，并像我们在仪表盘中所做的那样路由到它。
+  我们要在它自己的页面中显示英雄详情，并像我们在控制台中所做的那样路由到它。
 
   We'll throw in a small twist for variety.
   We are keeping the "master/detail" style but shrinking the detail to a "mini", read-only version.
@@ -1254,15 +1266,30 @@ block heroes-component-cleanup
 :marked
   ### Update the _HeroesComponent_ class.
 
+  ### 更新_HeroesComponent_类
+
   The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click. 
   The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
   by telling the router where to go.
 
+  点击按钮时，`HeroesComponent`导航到`HeroesDetailComponent`。
+  该按钮的_点击_事件被绑定到`gotoDetail`方法，它使用命令式的导航，告诉路由器去哪儿。
+
   This approach requires some changes to the component class:
 
+  该方法需要组件类做一些变化：
+
   1. Import the `router` from the Angular router library
+
+  1. 从Angular路由器库导入`router`
+
   1. Inject the `router` in the constructor (along with the `HeroService`)
+
+  1. 在构造函数中注入`router`（与`HeroService`一起）
+
   1. Implement `gotoDetail` by calling the `router.navigate` method
+
+  1. 实现`gotoDetail`，调用`router.navigate`方法
   
 +makeExcerpt('app/heroes.component.ts', 'gotoDetail')
 :marked
@@ -1272,6 +1299,8 @@ block heroes-component-cleanup
   back in the `DashboardComponent`
   Here's the fully revised `HeroesComponent` class:
 
+  注意，我们将一个双元素的**链接参数数组**——路径和路由参数——传递到`router.navigate`，与之前在`DashboardComponent`中使用`[routerLink]`绑定一样。
+
 +makeExcerpt('app/heroes.component.ts', 'class')
 
 :marked
@@ -1281,8 +1310,8 @@ block heroes-component-cleanup
   We can jump back and forth between the dashboard and the heroes.
 
   刷新浏览器，并开始点击。
-  我们能在应用中导航：从仪表盘到英雄详情再回来，从英雄列表到Mini版英雄详情到英雄详情，再回到英雄列表。
+  我们能在应用中导航：从控制台到英雄详情再回来，从英雄列表到Mini版英雄详情到英雄详情，再回到英雄列表。
-  我们可以在仪表盘和英雄列表之间跳来跳去。
+  我们可以在控制台和英雄列表之间跳来跳去。
 
   We've met all of the navigational requirements that propelled this chapter.
 
@@ -1302,12 +1331,12 @@ block heroes-component-cleanup
 
   ### A Dashboard with Style
 
-  ### 具有样式的仪表盘
+  ### 具有样式的控制台
 
   The designers think we should display the dashboard heroes in a row of rectangles.
   They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
 
-  设计师认为我们应该把仪表盘的英雄们显示在一排方块中。
+  设计师认为我们应该把控制台的英雄们显示在一排方块中。
   它们给了我们大约60行CSS来实现它，包括一些简单的媒体查询语句来实现响应式设计。
 
   If we paste these ~60 lines into the component `styles` metadata,
@@ -1443,7 +1472,7 @@ block css-files
 :marked
   Look at the app now. Our dashboard, heroes, and navigation links are styling!
 
-  看看现在的应用！我们的仪表盘、英雄列表和导航链接都漂亮多了！
+  看看现在的应用！我们的控制台、英雄列表和导航链接都漂亮多了！
 
 figure.image-display
   img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="查看导航栏")