diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index e93eba044a..574390a94a 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/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 `