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

Polish by review

This commit is contained in:
Yang Lin 2016-11-21 00:22:25 +08:00
parent ba8503d9b1
commit bf4e0c49ff
1 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -53,7 +53,7 @@ figure.image-display
:marked :marked
Run the <live-example></live-example> for this part. Run the <live-example></live-example> for this part.
运行这部分的<live-example>在线例子</live-example>。 运行这部分的<live-example>在线例子</live-example>。
+ifDocsFor('ts|js') +ifDocsFor('ts|js')
@ -62,7 +62,7 @@ figure.image-display
:marked :marked
To see the URL changes in the browser address bar, To see the URL changes in the browser address bar,
pop out the preview window by clicking the blue 'X' button in the upper right corner: pop out the preview window by clicking the blue 'X' button in the upper right corner:
注意看浏览器地址栏中的URL变化，点击右上角的蓝色'X'按钮，弹出预览窗口。 注意看浏览器地址栏中的URL变化，点击右上角的蓝色'X'按钮，弹出预览窗口。
.l-main-section .l-main-section
@ -101,10 +101,10 @@ block keep-app-running
### Keep the app transpiling and running ### Keep the app transpiling and running
### 让应用代码保持转译和运行 ### 让应用代码保持转译和运行
Open a terminal/console window and enter the following command to Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes: start the TypeScript compiler, start the server, and watch for changes:
打开terminal/console窗口，运行下列命令启动TypeScript编译器，它会监视文件变更，并启动开发服务器： 打开terminal/console窗口，运行下列命令启动TypeScript编译器，它会监视文件变更，并启动开发服务器：
code-example(language="bash"). code-example(language="bash").
@ -213,55 +213,55 @@ code-example(language="bash").
* add the supporting `import` statements. * add the supporting `import` statements.
* 添加支持性的`import`语句。 * 添加支持性的`import`语句。
* Create the file <span ngio-ex>app/app.component.ts</span>. * Create the file <span ngio-ex>app/app.component.ts</span>.
* 创建一个名叫<span ngio-ex>app.component.ts</span>的新文件。 * 创建一个名叫<span ngio-ex>app.component.ts</span>的新文件。
* Define an <span if-docs="ts">exported</span> `AppComponent` class. * Define an <span if-docs="ts">exported</span> `AppComponent` class.
* 定义一个<span if-docs="ts">导出的</span> ``AppComponent`类。 * 定义一个<span if-docs="ts">导出的</span> `AppComponent`类。
* Add an `@Component` !{_decorator} above the class with a `my-app` selector. * Add an `@Component` !{_decorator} above the class with a `my-app` selector.
* 在类的上方添加`@Component`元数据装饰器，装饰器中带有`my-app`选择器。 * 在类的上方添加`@Component`元数据装饰器，装饰器中带有`my-app`选择器。
* Move the following from `HeroesComponent` to `AppComponent`: * Move the following from `HeroesComponent` to `AppComponent`:
* 将下面的项目从`HeroesComponent`移到`AppComponent`： * 将下面的项目从`HeroesComponent`移到`AppComponent`：
* `title` class property * `title` class property
* `title`类属性 * `title`类属性
* `@Component` template `<h1>` element, which contains a binding to `title` * `@Component` template `<h1>` element, which contains a binding to `title`
* `@Component`模板中的`<h1>`标签，它包含了对`title`属性的绑定。 * `@Component`模板中的`<h1>`标签，它包含了对`title`属性的绑定。
* Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes. * Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes.
* *
在模板的标题下面添加`<my-heroes>`标签，以便我们仍能看到英雄列表。 在模板的标题下面添加`<my-heroes>`标签，以便我们仍能看到英雄列表。
* Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags. * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.
* 添加`HeroesComponent`组件到根模块的`declarations`数组中，以便Angular能认识`<my-heroes>`标签。 * 添加`HeroesComponent`组件到根模块的`declarations`数组中，以便Angular能认识`<my-heroes>`标签。
* Add `HeroService` to the `providers` !{_array} of `!{_AppModuleVsAppComp}` because we'll need it in every other view. * Add `HeroService` to the `providers` !{_array} of `!{_AppModuleVsAppComp}` because we'll need it in every other view.
* 添加`HeroService`到`AppModule`的`providers`数组中，因为我们的每一个视图都需要它。 * 添加`HeroService`到`AppModule`的`providers`数组中，因为我们的每一个视图都需要它。
* Remove `HeroService` from the `HeroesComponent` `providers` !{_array} since it has been promoted. * Remove `HeroService` from the `HeroesComponent` `providers` !{_array} since it has been promoted.
* 从`HerosComponent`的`providers`数组中移除HeroService`，因为它被提到模块了。 * 从`HerosComponent`的`providers`数组中移除HeroService`，因为它被提到模块了。
* Add the supporting `import` statements for `AppComponent`. * Add the supporting `import` statements for `AppComponent`.
* 导入`AppComponent`。 * 导入`AppComponent`。
Our first draft looks like this: Our first draft looks like this:
我们的第一个草稿版就像这样： 我们的第一个草稿版就像这样：
block app-comp-v1 block app-comp-v1
@ -310,25 +310,25 @@ block app-comp-v1
We'll need the Angular *Router*. We'll need the Angular *Router*.
我们需要Angular*路由器*。 我们需要Angular*路由器*。
block angular-router block angular-router
:marked :marked
The Angular router is an external, optional Angular NgModule called `RouterModule`. The Angular router is an external, optional Angular NgModule called `RouterModule`.
The router is a combination of multiple provided services (`RouterModule`), The router is a combination of multiple provided services (`RouterModule`),
multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`), multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
and a configuration (`Routes`). We'll configure our routes first. and a configuration (`Routes`). We'll configure our routes first.
Angular路由器是一个可选的外部Angular NgModule，名叫`RouterModule`。 Angular路由器是一个可选的外部Angular NgModule，名叫`RouterModule`。
路由器包含了多种服务(`RouterModule`)、多种指令(`RouterOutlet, RouterLink, RouterLinkActive`)、 路由器包含了多种服务(`RouterModule`)、多种指令(`RouterOutlet, RouterLink, RouterLinkActive`)、
和一套配置(`Routes`)。我们将先配置路由。 和一套配置(`Routes`)。我们将先配置路由。
:marked :marked
### Add the base tag ### Add the base tag
### 设置base标签 ### 设置base标签
Open the `index.html` and add `<base href="/">` at the top of the `<head>` section. Open the `index.html` and add `<base href="/">` at the top of the `<head>` section.
打开`index.html`并且在`<head>`区的顶部添加`<base href="/">`语句。 打开`index.html`并且在`<head>`区的顶部添加`<base href="/">`语句。
+makeExcerpt('index.html', 'base-href') +makeExcerpt('index.html', 'base-href')
@ -344,24 +344,24 @@ a#configure-routes
block router-config-intro block router-config-intro
:marked :marked
### Configure routes ### Configure routes
### 配置路由 ### 配置路由
Our application doesn't have any routes yet. Our application doesn't have any routes yet.
We'll start by creating a configuration for the application routes. We'll start by creating a configuration for the application routes.
本应用还没有路由。我们来为应用的路由新建一个配置。 本应用还没有路由。我们来为应用的路由新建一个配置。
:marked :marked
*Routes* tell the router which views to display when a user clicks a link or *Routes* tell the router which views to display when a user clicks a link or
pastes a URL into the browser address bar. pastes a URL into the browser address bar.
*路由*告诉路由器，当用户点击链接或者把URL粘贴到浏览器地址栏时，应该显示哪个视图。 *路由*告诉路由器，当用户点击链接或者把URL粘贴到浏览器地址栏时，应该显示哪个视图。
Let's define our first route as a route to the heroes component: Let's define our first route as a route to the heroes component:
我们的第一个路由是指向`HeroesComponent`的。 我们的第一个路由是指向`HeroesComponent`的。
- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts' - var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
+makeExcerpt('app/' + _file + ' (heroes route)', 'heroes') +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
@ -376,9 +376,9 @@ block router-config-intro
此刻我们只有一个路由定义，但别急，后面还会添加更多。 此刻我们只有一个路由定义，但别急，后面还会添加更多。
This *route definition* has the following parts: This *route definition* has the following parts:
*路由定义*包括几个部分： *路由定义*包括几个部分：
* **path**: the router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}/heroes`). * **path**: the router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}/heroes`).
* **path**: 路由器会用它来匹配浏览器地址栏中的地址（`!{_routePathPrefix}/heroes`）。 * **path**: 路由器会用它来匹配浏览器地址栏中的地址（`!{_routePathPrefix}/heroes`）。
@ -392,11 +392,11 @@ block router-config-intro
Learn more about defining routes with `!{_RoutesVsAtRouteConfig}` in the [Routing](../guide/router.html) chapter. Learn more about defining routes with `!{_RoutesVsAtRouteConfig}` in the [Routing](../guide/router.html) chapter.
到[路由](../guide/router.html)章节学习更多关于使用`Routes`定义路由的知识。 到[路由](../guide/router.html)章节学习更多关于使用`Routes`定义路由的知识。
+ifDocsFor('ts|js') +ifDocsFor('ts|js')
:marked :marked
### Make the router available ### Make the router available
### 让路由器可用 ### 让路由器可用
We've setup the initial route configuration. Now we'll add it to our `AppModule`. We've setup the initial route configuration. Now we'll add it to our `AppModule`.
@ -442,7 +442,7 @@ block router-config-intro
We don't really expect users to paste a route URL into the address bar. We don't really expect users to paste a route URL into the address bar.
We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`. We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
我们当然不会真让用户往地址栏中粘贴路由的URL，而应该在模板中的什么地方添加一个链接标签。点击时，就会导航到`HeroesComponent`组件。 我们当然不会真让用户往地址栏中粘贴路由的URL，而应该在模板中的什么地方添加一个锚标签。点击时，就会导航到`HeroesComponent`组件。
The revised template looks like this: The revised template looks like this:
@ -455,12 +455,12 @@ block routerLink
Notice the `routerLink` binding in the anchor tag. Notice the `routerLink` binding in the anchor tag.
We bind the `RouterLink` directive (another of the `RouterModule` directives) to a string We bind the `RouterLink` directive (another of the `RouterModule` directives) to a string
that tells the router where to navigate when the user clicks the link. that tells the router where to navigate when the user clicks the link.
注意，链接标签中的`[routerLink]`绑定。我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个字符串。它将告诉路由器，当用户点击这个链接时，应该导航到哪里。 注意，锚标签中的`[routerLink]`绑定。我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个字符串。它将告诉路由器，当用户点击这个链接时，应该导航到哪里。
Since our link is not dynamic, we define a *routing instruction* with a **one-time binding** to our route **path**. Since our link is not dynamic, we define a *routing instruction* with a **one-time binding** to our route **path**.
Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`. Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
由于这个链接不是动态的，我们只要用**一次性绑定**的方式绑定到路由的**路径（path）**就行了。 由于这个链接不是动态的，我们只要用**一次性绑定**的方式绑定到路由的**路径（path）**就行了。
回来看路由配置表，我们清楚的看到，这个路径 —— `'/heroes'`就是指向`HeroesComponent`的那个路由的路径。 回来看路由配置表，我们清楚的看到，这个路径 —— `'/heroes'`就是指向`HeroesComponent`的那个路由的路径。
@ -468,7 +468,7 @@ block routerLink
:marked :marked
Learn more about dynamic router links and the *link parameters array* Learn more about dynamic router links and the *link parameters array*
in the [Routing](../guide/router.html#link-parameters-array) chapter. in the [Routing](../guide/router.html#link-parameters-array) chapter.
参阅[路由](../guide/router.html#link-parameters-array)章学习更多动态路由器链接和*链接参数数组*的知识。 参阅[路由](../guide/router.html#link-parameters-array)章学习更多动态路由器链接和*链接参数数组*的知识。
:marked :marked
@ -544,15 +544,15 @@ block routerLink
+ifDocsFor('ts|js') +ifDocsFor('ts|js')
:marked :marked
Also import and add `DashboardComponent` to our `AppModule`'s `declarations`. Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
还得把`DashboardComponent`添加到`AppModule`的`declarations`数组中。 还得把`DashboardComponent`添加到`AppModule`的`declarations`数组中。
+makeExcerpt('app/app.module.ts', 'dashboard') +makeExcerpt('app/app.module.ts', 'dashboard')
:marked :marked
#### !{_redirectTo} #### !{_redirectTo}
#### 重定向 #### 重定向
We want the app to show the dashboard when it starts and We want the app to show the dashboard when it starts and
@ -561,14 +561,14 @@ block routerLink
我们希望在应用启动的时候就显示仪表盘，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。 我们希望在应用启动的时候就显示仪表盘，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。
记住，浏览器启动时，在地址栏中使用的路径是`/`。 记住，浏览器启动时，在地址栏中使用的路径是`/`。
block redirect-vs-use-as-default block redirect-vs-use-as-default
:marked :marked
We can use a redirect route to make this happen. Add the following We can use a redirect route to make this happen. Add the following
to our array of route definitions: to our array of route definitions:
可以使用重定向路由来实现它。添加下面的内容到路由定义的数组中： 可以使用重定向路由来实现它。添加下面的内容到路由定义的数组中：
+makeExcerpt('app/app.module.3.ts','redirect') +makeExcerpt('app/app.module.3.ts','redirect')
.l-sub-section .l-sub-section
@ -579,13 +579,13 @@ block redirect-vs-use-as-default
:marked :marked
#### Add navigation to the template #### Add navigation to the template
#### 添加导航到模版中 #### 添加导航到模版中
Finally, add a dashboard navigation link to the template, just above the *Heroes* link. Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
最后，在模板上添加一个到仪表盘的导航链接，就放在*Heroes（英雄列表）*链接的上方。 最后，在模板上添加一个到仪表盘的导航链接，就放在*Heroes（英雄列表）*链接的上方。
- var _vers = _docsFor == 'dart' ? '' : '.1' - var _vers = _docsFor == 'dart' ? '' : '.1'
+makeExcerpt('app/app.component' + _vers + '.ts', 'template-v3') +makeExcerpt('app/app.component' + _vers + '.ts', 'template-v3')
@ -614,7 +614,7 @@ block redirect-vs-use-as-default
把元数据中的`template`属性替换为`templateUrl`属性，它将指向一个新的模板文件。 把元数据中的`template`属性替换为`templateUrl`属性，它将指向一个新的模板文件。
Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`. Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
设置`moduleId`属性到`module.id`，相对模块加载`templateUrl`。 设置`moduleId`属性到`module.id`，相对模块加载`templateUrl`。
+makeExcerpt('app/dashboard.component.ts', 'metadata') +makeExcerpt('app/dashboard.component.ts', 'metadata')
@ -631,7 +631,7 @@ block redirect-vs-use-as-default
We added extra `<div>` elements to help with styling later in this chapter. We added extra `<div>` elements to help with styling later in this chapter.
我们又一次使用`*ngFor`来在英雄列表上迭代，并显示它们的名字。 我们又一次使用`*ngFor`来在英雄列表上迭代，并显示它们的名字。
还添加了一个额外的`<div>`元素，来帮助稍后的美化工作。 还添加了一个额外的`<div>`元素，来帮助稍后的美化工作。
### Share the *HeroService* ### Share the *HeroService*
@ -754,7 +754,7 @@ code-example(language="html").
Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to. Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
显然，在我们的任何一个路由场景中它都无法工作。 显然，在我们的任何一个路由场景中它都无法工作。
特别是最后一个需求，我们无法将一个完整的hero对象嵌入到URL中！不过我们本来也不想这样。 最后一种场景肯定不行，我们无法将一个完整的hero对象嵌入到URL中！不过我们本来也不想这样。
### Parameterized route ### Parameterized route
@ -773,7 +773,7 @@ code-example(format='').
We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`. We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
URL中的`/detail/`部分是固定不变的，但结尾的数字`id`部分会随着英雄的不同而变化。 URL中的`/detail/`部分是固定不变的，但结尾的数字`id`部分会随着英雄的不同而变化。
我们要把路由中可变的那部分表示成一个*参数（parameter）*或*符号（token）*，代表英雄的`id`。 我们要把路由中可变的那部分表示成一个*参数（parameter）*或*令牌（token）*，代表英雄的`id`。
### Configure a Route with a Parameter ### Configure a Route with a Parameter
@ -796,13 +796,13 @@ code-example(format='').
.l-sub-section .l-sub-section
:marked :marked
Remember to import the hero detail component before creating this route. Remember to import the hero detail component before creating this route.
记得在创建这个路由前导入英雄详情组件。 记得在创建这个路由前导入英雄详情组件。
:marked :marked
We're finished with the application routes. We're finished with the application routes.
我们已经完成了本应用的路由。 我们已经完成了本应用中路由的配置。
We won't add a `'Hero Detail'` link to the template because users We won't add a `'Hero Detail'` link to the template because users
@ -846,15 +846,15 @@ block route-params
We will no longer receive the hero in a parent component property binding. We will no longer receive the hero in a parent component property binding.
The new `HeroDetailComponent` should take the `id` parameter from the `params` observable The new `HeroDetailComponent` should take the `id` parameter from the `params` observable
in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`. in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
我们不会再从父组件的属性绑定中接收英雄数据。 我们不会再从父组件的属性绑定中接收英雄数据。
新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。 新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。
:marked :marked
First, add the requisite imports: First, add the requisite imports:
首先，添加需要的导入项目： 首先，添加需要的导入项目：
- var _vers = _docsFor == 'dart' ? '' : '.1' - var _vers = _docsFor == 'dart' ? '' : '.1'
+makeExcerpt('app/hero-detail.component' + _vers + '.ts', 'added-imports', '') +makeExcerpt('app/hero-detail.component' + _vers + '.ts', 'added-imports', '')
@ -862,7 +862,7 @@ block route-params
:marked :marked
Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected
into the constructor, saving their values in private fields: into the constructor, saving their values in private fields:
然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中： 然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
+makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor') +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
@ -880,7 +880,7 @@ block ngOnInit
extract the `id` parameter value from the `ActivatedRoute` service extract the `id` parameter value from the `ActivatedRoute` service
and use the `HeroService` to fetch the hero with that `id`. and use the `HeroService` to fetch the hero with that `id`.
在`ngOnInit`生命周期钩子中，使用可观察对象`params`从`ActivatedRoute`服务中提取`id`参数，并且使用`HeroService`来获取具有这个`id`的英雄数据。 在`ngOnInit`生命周期钩子中，我们从`ActivatedRoute`服务的可观察对象`params`中提取`id`参数，并且使用`HeroService`来获取具有这个`id`的英雄数据。
+makeExcerpt('app/hero-detail.component.ts', 'ngOnInit') +makeExcerpt('app/hero-detail.component.ts', 'ngOnInit')
@ -888,10 +888,10 @@ block extract-id
:marked :marked
Notice how we extract the `id` by calling the `forEach` method Notice how we extract the `id` by calling the `forEach` method
which will deliver our !{_array} of route parameters. which will deliver our !{_array} of route parameters.
注意我们提取`id`的方法：调用`forEach`方法，它会提供一个路由参数的数组。 注意我们提取`id`的方法：调用`forEach`方法，它会提供一个路由参数的数组。
- var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator' - var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
:marked :marked
The hero `id` is a number. Route parameters are *always strings*. The hero `id` is a number. Route parameters are *always strings*.
So we convert the route parameter value to a number with the !{_str2int}. So we convert the route parameter value to a number with the !{_str2int}.
@ -934,7 +934,7 @@ block extract-id
using the `Location` service we injected previously. using the `Location` service we injected previously.
现在用户可以点击`AppComponent`中的两个链接，或点击浏览器的“后退”按钮。 现在用户可以点击`AppComponent`中的两个链接，或点击浏览器的“后退”按钮。
我们来添加第三个选项：一个`goBack`方法，使用之前注入的`Location`服务实现浏览器的历史堆栈的后退。 我们来添加第三个选项：一个`goBack`方法，它使用之前注入的`Location`服务，利用浏览器的历史堆栈，导航到上一步。
+makeExcerpt('app/hero-detail.component.ts', 'goBack') +makeExcerpt('app/hero-detail.component.ts', 'goBack')
@ -945,7 +945,7 @@ block extract-id
Going back too far could take us out of the application. Going back too far could take us out of the application.
That's acceptable in a demo. We'd guard against it in a real application, That's acceptable in a demo. We'd guard against it in a real application,
perhaps with the [!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html). perhaps with the [!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).
回退太多步会跑出我们的应用。 回退太多步会跑出我们的应用。
在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。 在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
也许你该用[!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).。 也许你该用[!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).。
@ -964,7 +964,7 @@ block extract-id
修改模板，添加这个按钮以提醒我们还要做更多的改进， 修改模板，添加这个按钮以提醒我们还要做更多的改进，
并把模板移到独立的<span ngio-ex>hero-detail.component.html</span>文件中去。 并把模板移到独立的<span ngio-ex>hero-detail.component.html</span>文件中去。
+makeExample('app/hero-detail.component.html')(format='.') +makeExample('app/hero-detail.component.html')(format='.')
:marked :marked
@ -993,12 +993,12 @@ block extract-id
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected 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. 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 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应该显示在浏览器的状态条上，用户应该能拷贝链接或者在新的浏览器标签页中打开英雄详情视图。 当鼠标移动到一个英雄方块上时，目标URL应该显示在浏览器的状态条上，用户应该能拷贝链接或者在新的浏览器标签页中打开英雄详情视图。
To achieve this effect, reopen the `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags To achieve this effect, reopen the `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
@ -1018,7 +1018,7 @@ block extract-id
destination routes, "/dashboard" and "/heroes". destination routes, "/dashboard" and "/heroes".
[`AppComponent`模板](#router-links)中的顶级导航有一些路由器链接被设置固定的路径，例如"/dashboard" and "/heroes"。 [`AppComponent`模板](#router-links)中的顶级导航有一些路由器链接被设置固定的路径，例如"/dashboard" and "/heroes"。
This time, we're binding to an expression containing a **link parameters !{_array}**. This time, we're binding to an expression containing a **link parameters !{_array}**.
The !{_array} has two elements, the ***!{_pathVsName}*** of 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`. the destination route and a ***route parameter*** set to the value of the current hero's `id`.
@ -1037,19 +1037,19 @@ block extract-id
:marked :marked
Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details. Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
刷新浏览器，并从仪表盘中选择一位英雄，应用就会直接导航到英雄的详情。 刷新浏览器，并从仪表盘中选择一位英雄，应用就会直接导航到英雄的详情。
.l-main-section .l-main-section
:marked :marked
## Refactor routes to a _Routing Module_ ## Refactor routes to a _Routing Module_
## 重构路由为一个**路由模块** ## 重构路由为一个**路由模块**
Almost 20 lines of `AppModule` are devoted to configuring four routes. Almost 20 lines of `AppModule` are devoted to configuring four routes.
Most application have many more routes and they [add guard services](../guide/router.html#guards) Most application have many more routes and they [add guard services](../guide/router.html#guards)
to protect against unwanted or unauthorized navigations. to protect against unwanted or unauthorized navigations.
Routing considerations could quickly dominate this module and obscure its primary purpose which is to Routing considerations could quickly dominate this module and obscure its primary purpose which is to
establish key facts about the entire app for the Angular compiler. establish key facts about the entire app for the Angular compiler.
`AppModule`中有将近20行代码是用来配置四个路由的。 `AppModule`中有将近20行代码是用来配置四个路由的。
@ -1057,7 +1057,7 @@ block extract-id
路由的配置可能迅速占领这个模块，并掩盖其主要目的，即为Angular编译器设置整个应用的关键配置。 路由的配置可能迅速占领这个模块，并掩盖其主要目的，即为Angular编译器设置整个应用的关键配置。
We should refactor the routing configuration into its own class. We should refactor the routing configuration into its own class.
What kind of class? What kind of class?
The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
class dedicated to routing should be some kind of module. class dedicated to routing should be some kind of module.
It should be a [_Routing Module_](../guide/router.html#routing-module). It should be a [_Routing Module_](../guide/router.html#routing-module).
@ -1067,11 +1067,11 @@ block extract-id
当前的`RouterModule.forRoot()`产生一个Angular `ModuleWithProviders`，所以这个路由类应该是一种模块类。 当前的`RouterModule.forRoot()`产生一个Angular `ModuleWithProviders`，所以这个路由类应该是一种模块类。
它应该是一个[**路由模块**](../guide/router.htm#routing-module)。 它应该是一个[**路由模块**](../guide/router.htm#routing-module)。
By convention the name of a _Routing Module_ contains the word "Routing" and By convention the name of a _Routing Module_ contains the word "Routing" and
aligns with the name of the module that declares the components navigated to". aligns with the name of the module that declares the components navigated to".
按约定，**路由模块**的名字应该包含“Routing”，并与导航到的组件所在的模块的名称看齐。 按约定，**路由模块**的名字应该包含“Routing”，并与导航到的组件所在的模块的名称看齐。
Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class: Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
在`app.module.ts`所在目录创建`app-routing.module.ts`文件。将下面从`AppModule`类提取出来的代码拷贝进去： 在`app.module.ts`所在目录创建`app-routing.module.ts`文件。将下面从`AppModule`类提取出来的代码拷贝进去：
@ -1079,9 +1079,9 @@ block extract-id
+makeExample('app/app-routing.module.ts') +makeExample('app/app-routing.module.ts')
:marked :marked
Noteworthy points, typical of _Routing Modules_: Noteworthy points, typical of _Routing Modules_:
典型**路由模块**值得注意的有： 典型**路由模块**值得注意的有：
* Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern. * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
* 将路由抽出到一个变量中。你将来可能会导出它。而且它让**路由模块**模式更加明确。 * 将路由抽出到一个变量中。你将来可能会导出它。而且它让**路由模块**模式更加明确。
@ -1089,12 +1089,12 @@ block extract-id
* Add `RouterModule.forRoot(routes)` to `imports`. * Add `RouterModule.forRoot(routes)` to `imports`.
* 添加`RouterModule.forRoot(routes)`到`imports`. * 添加`RouterModule.forRoot(routes)`到`imports`.
* Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
such as `RouterLink` and `RouterOutlet`. such as `RouterLink` and `RouterOutlet`.
* 添加`RouterModule`到`exports`，这样关联模块的组件可以访问路由的声明，比如`RouterLink`和`RouterOutlet`。 * 添加`RouterModule`到`exports`，这样关联模块的组件可以访问路由的声明，比如`RouterLink`和`RouterOutlet`。
* No `declarations`! Declarations are the responsibility of the companion module. * No `declarations`! Declarations are the responsibility of the companion module.
* 无`Declarations`！声明是关联模块的任务。 * 无`Declarations`！声明是关联模块的任务。
@ -1107,7 +1107,7 @@ block extract-id
### 更新_AppModule_ ### 更新_AppModule_
Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` Now delete the routing configuration from `AppModule` and import the `AppRoutingModule`
(_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list). (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
现在，删除`AppModule`中的路由配置，并导入`AppRoutingModule`（使用ES`import`语句导入**并**将它添加到`NgModule.imports`列表）。 现在，删除`AppModule`中的路由配置，并导入`AppRoutingModule`（使用ES`import`语句导入**并**将它添加到`NgModule.imports`列表）。
@ -1120,7 +1120,7 @@ block extract-id
null, null,
`app/app.module.ts (after), app/app.module.ts (before)`) `app/app.module.ts (after), app/app.module.ts (before)`)
:marked :marked
It's simpler and focused on indentifying the key pieces of the application. It's simpler and focused on indentifying the key pieces of the application.
它更简单，专注于确定应用的关键部分。 它更简单，专注于确定应用的关键部分。
@ -1132,7 +1132,7 @@ block extract-id
Earlier we added the ability to select a hero from the dashboard. Earlier we added the ability to select a hero from the dashboard.
We'll do something similar in the `HeroesComponent`. We'll do something similar in the `HeroesComponent`.
之前我们添加了从仪表盘选择一个英雄的功能。 之前我们添加了从仪表盘选择一个英雄的功能。
我们现在要做的事和`HeroesComponent`中很像。 我们现在要做的事和`HeroesComponent`中很像。
@ -1146,12 +1146,12 @@ block extract-id
:marked :marked
Our goal is to move the detail to its own view and navigate to it when the user decides to edit a selected hero. Our goal is to move the detail to its own view and navigate to it when the user decides to edit a selected hero.
我们要做的是将详情建移动到它自己的视图，并在用户决定编辑一个英雄时导航到它。 我们要做的是将英雄详情移动到它自己的视图，并在用户决定编辑一个英雄时导航到它。
Delete the `<h1>` at the top (we forgot about it during the `AppComponent`-to-`HeroesComponent` conversion). Delete the `<h1>` at the top (we forgot about it during the `AppComponent`-to-`HeroesComponent` conversion).
删除顶部的`<h1>`（在从`AppComponent`转到`HeroesComponent`时忘记改它了）。 删除顶部的`<h1>`（在从`AppComponent`转到`HeroesComponent`时忘记修改它了）。
Delete the last line of the template with the `<my-hero-detail>` tags. Delete the last line of the template with the `<my-hero-detail>` tags.
删除模板最后带有`<my-hero-detail>`标签的那一行。 删除模板最后带有`<my-hero-detail>`标签的那一行。
@ -1197,7 +1197,7 @@ figure.image-display
Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `uppercase` pipe Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `uppercase` pipe
that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ). that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
注意，英雄的名字全被显示成大写字母。那是 `uppercase`管道的效果，借助它，我们能干预插值表达式绑定过程。可以管道操作符 ( | ) 后面看到它。 注意，英雄的名字全被显示成大写字母。那是`uppercase`管道的效果，借助它，我们能干预插值表达式绑定的过程。可以在管道操作符(|)后面看到它。
+makeExcerpt('app/heroes.component.html', 'pipe', '') +makeExcerpt('app/heroes.component.html', 'pipe', '')
@ -1242,7 +1242,7 @@ figure.image-display
1. 把样式内容*剪切并粘贴*到新的<span ngio-ex>heroes.component.css</span>文件。 1. 把样式内容*剪切并粘贴*到新的<span ngio-ex>heroes.component.css</span>文件。
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files. 1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
1. *设置*组件元数据的`templateUrl`和`styleUrls`属性，分别引用这两个文件。 1. *设置*组件元数据的`templateUrl`和`styleUrls`属性，分别引用这两个文件。
@ -1253,10 +1253,10 @@ figure.image-display
.l-sub-section .l-sub-section
:marked :marked
The `styleUrls` property is !{_an} !{_array} of style file names (with paths). The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
We could list multiple style files from different locations if we needed them. We could list multiple style files from different locations if we needed them.
`styleUrls`属性是一个由样式文件的文件名(包括路径)组成的数组。 `styleUrls`属性是一个由样式文件的文件名(包括路径)组成的数组。
我们还可以列出来自多个不同位置的样式文件。 我们还可以列出来自多个不同位置的样式文件。
block heroes-component-cleanup block heroes-component-cleanup
//- Only relevant for Dart. //- Only relevant for Dart.
@ -1268,7 +1268,7 @@ block heroes-component-cleanup
### 更新_HeroesComponent_类 ### 更新_HeroesComponent_类
The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click. 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_ The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
by telling the router where to go. by telling the router where to go.
@ -1290,7 +1290,7 @@ block heroes-component-cleanup
1. Implement `gotoDetail` by calling the `router.navigate` method 1. Implement `gotoDetail` by calling the `router.navigate` method
1. 实现`gotoDetail`，调用`router.navigate`方法 1. 实现`gotoDetail`，调用`router.navigate`方法
+makeExcerpt('app/heroes.component.ts', 'gotoDetail') +makeExcerpt('app/heroes.component.ts', 'gotoDetail')
:marked :marked
Note that we're passing a two-element **link parameters !{_array}** Note that we're passing a two-element **link parameters !{_array}**
@ -1372,7 +1372,7 @@ block heroes-component-cleanup
在`!{_appDir}`目录下添加<span ngio-ex>hero-detail.component.css</span>文件， 在`!{_appDir}`目录下添加<span ngio-ex>hero-detail.component.css</span>文件，
并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。 并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。
同时删除`hero``@Input`装饰器属性<span if-docs="ts">和它的导入语句</span>。 同时删除`hero``@Input`装饰器属性<span if-docs="ts">和它的导入语句</span>。
Here's the content for the aforementioned component CSS files. Here's the content for the aforementioned component CSS files.
@ -1409,11 +1409,11 @@ block css-files
**The *routerLinkActive* directive** **The *routerLinkActive* directive**
***routerLinkActive*指令** ***routerLinkActive*指令**
The Angular Router provides a `routerLinkActive` directive we can use to The Angular Router provides a `routerLinkActive` directive we can use to
add a class to the HTML navigation element whose route matches the active route. add a class to the HTML navigation element whose route matches the active route.
All we have to do is define the style for it. Sweet! All we have to do is define the style for it. Sweet!
Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹配了活动路由的HTML导航元素自动添加一个CSS类。 Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹配了活动路由的HTML导航元素自动添加一个CSS类。
我们唯一要做的就是为它定义样式。真好！ 我们唯一要做的就是为它定义样式。真好！
@ -1481,12 +1481,12 @@ figure.image-display
.l-main-section .l-main-section
:marked :marked
## Application structure and code ## Application structure and code
## 应用结构和代码 ## 应用结构和代码
Review the sample source code in the <live-example></live-example> for this chapter. Review the sample source code in the <live-example></live-example> for this chapter.
Verify that we have the following structure: Verify that we have the following structure:
回顾一下本章<live-example>在线例子</live-example>中范例代码。 回顾一下本章<live-example>在线例子</live-example>中范例代码。
验证我们是否已经得到了如下结构： 验证我们是否已经得到了如下结构：