fix: add line break before <code-example...
This commit is contained in:
Zhicheng Wang
parent
ed873203b5
commit
75ac1cd5ce
@ -75,7 +75,9 @@ hero is active, the element appears in a slightly larger size and lighter color.
|
||||
|
||||
|
||||
通过这些，可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间进行转场。
|
||||
当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。<code-example path="animations/src/app/hero-list-basic.component.ts" region="animationdef" title="hero-list-basic.component.ts (@Component excerpt)" linenums="false">
|
||||
当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。
|
||||
|
||||
<code-example path="animations/src/app/hero-list-basic.component.ts" region="animationdef" title="hero-list-basic.component.ts (@Component excerpt)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -94,7 +96,9 @@ Now, using the `[@triggerName]` syntax, attach the animation that you just defin
|
||||
one or more elements in the component's template.
|
||||
|
||||
|
||||
我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用`[@triggerName]`语法来把它附加到一个或多个元素上。<code-example path="animations/src/app/hero-list-basic.component.ts" region="template" title="hero-list-basic.component.ts (excerpt)" linenums="false">
|
||||
我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用`[@triggerName]`语法来把它附加到一个或多个元素上。
|
||||
|
||||
<code-example path="animations/src/app/hero-list-basic.component.ts" region="template" title="hero-list-basic.component.ts (excerpt)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -110,7 +114,9 @@ With this setup, an animated transition appears whenever a hero object changes s
|
||||
Here's the full component implementation:
|
||||
|
||||
|
||||
通过这些设置，一旦英雄对象的状态发生了变化，就会触发一个转场动画。下面是完整的组件实现：<code-example path="animations/src/app/hero-list-basic.component.ts" title="hero-list-basic.component.ts">
|
||||
通过这些设置，一旦英雄对象的状态发生了变化，就会触发一个转场动画。下面是完整的组件实现：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-basic.component.ts" title="hero-list-basic.component.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -161,7 +167,9 @@ If several transitions have the same timing configuration, you can combine
|
||||
them into the same `transition` definition:
|
||||
|
||||
|
||||
如果多个转场都有同样的时间线配置，就可以把它们合并进同一个`transition`定义中：<code-example path="animations/src/app/hero-list-combined-transitions.component.ts" region="transitions" title="src/app/hero-list-combined-transitions.component.ts" linenums="false">
|
||||
如果多个转场都有同样的时间线配置，就可以把它们合并进同一个`transition`定义中：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-combined-transitions.component.ts" region="transitions" title="src/app/hero-list-combined-transitions.component.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -170,7 +178,9 @@ When both directions of a transition have the same timing, as in the previous
|
||||
example, you can use the shorthand syntax `<=>`:
|
||||
|
||||
|
||||
如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法：<code-example path="animations/src/app/hero-list-twoway.component.ts" region="transitions" title="src/app/hero-list-twoway.component.ts" linenums="false">
|
||||
如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-twoway.component.ts" region="transitions" title="src/app/hero-list-twoway.component.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -183,7 +193,9 @@ defined in a `state`.
|
||||
|
||||
|
||||
有时希望一些样式只在动画期间生效，但在结束后并不保留它们。这时可以把这些样式内联在`transition`中进行定义。
|
||||
在这个例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在`state`中。<code-example path="animations/src/app/hero-list-inline-styles.component.ts" region="transitions" title="src/app/hero-list-inline-styles.component.ts" linenums="false">
|
||||
在这个例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在`state`中。
|
||||
|
||||
<code-example path="animations/src/app/hero-list-inline-styles.component.ts" region="transitions" title="src/app/hero-list-inline-styles.component.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -373,7 +385,9 @@ In this example, the leave animation takes whatever height the element has befor
|
||||
leaves and animates from that height to zero:
|
||||
|
||||
|
||||
这个例子中的“离场”动画会取得该元素在离场前的高度，并且把它从这个高度用动画转场到0高度：<code-example path="animations/src/app/hero-list-auto.component.ts" region="animationdef" title="src/app/hero-list-auto.component.ts" linenums="false">
|
||||
这个例子中的“离场”动画会取得该元素在离场前的高度，并且把它从这个高度用动画转场到0高度：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-auto.component.ts" region="animationdef" title="src/app/hero-list-auto.component.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -456,7 +470,9 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
|
||||
|
||||
|
||||
|
||||
这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，也就是`0.2s`，但它们有不同的缓动函数。“离场”动画会在100毫秒的延迟之后开始，也就是`'0.2s 10 ease-out'`：<code-example path="animations/src/app/hero-list-timings.component.ts" region="animationdef" title="hero-list-timings.component.ts (excerpt)" linenums="false">
|
||||
这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，也就是`0.2s`，但它们有不同的缓动函数。“离场”动画会在100毫秒的延迟之后开始，也就是`'0.2s 10 ease-out'`：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-timings.component.ts" region="animationdef" title="hero-list-timings.component.ts (excerpt)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -483,7 +499,9 @@ This example adds some "bounce" to the enter and leave animations with
|
||||
keyframes:
|
||||
|
||||
|
||||
在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”：<code-example path="animations/src/app/hero-list-multistep.component.ts" region="animationdef" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
|
||||
在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-multistep.component.ts" region="animationdef" title="hero-list-multistep.component.ts (excerpt)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -524,7 +542,9 @@ are applied to the same element in parallel, but run independently of each other
|
||||
|
||||
|
||||
这种情况下就可以用动画*组*来解决了。在这个例子中，我们同时在进场和离场时使用了组，以便能让它们使用两种不同的时间线配置。
|
||||
它们被同时应用到同一个元素上，但又彼此独立运行：<code-example path="animations/src/app/hero-list-groups.component.ts" region="animationdef" title="hero-list-groups.component.ts (excerpt)" linenums="false">
|
||||
它们被同时应用到同一个元素上，但又彼此独立运行：
|
||||
|
||||
<code-example path="animations/src/app/hero-list-groups.component.ts" region="animationdef" title="hero-list-groups.component.ts (excerpt)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -171,7 +171,9 @@ then modify it as follows.
|
||||
|
||||
|
||||
`ngc`需要自己的带有AOT专用设置的`tsconfig.json`。
|
||||
把原始的`tsconfig.json`拷贝到一个名叫`tsconfig-aot.json`的文件中，然后像这样修改它：<code-example path="aot-compiler/tsconfig-aot.json" title="tsconfig-aot.json" linenums="false">
|
||||
把原始的`tsconfig.json`拷贝到一个名叫`tsconfig-aot.json`的文件中，然后像这样修改它：
|
||||
|
||||
<code-example path="aot-compiler/tsconfig-aot.json" title="tsconfig-aot.json" linenums="false">
|
||||
</code-example>
|
||||
|
||||
The `compilerOptions` section is unchanged except for one property.
|
||||
@ -231,7 +233,9 @@ Initiate AOT compilation from the command line using the previously installed `n
|
||||
|
||||
Windows users should surround the `ngc` command in double quotes:
|
||||
|
||||
Windows用户应该双引号`ngc`命令：<code-example format='.'>
|
||||
Windows用户应该双引号`ngc`命令：
|
||||
|
||||
<code-example format='.'>
|
||||
"node_modules/.bin/ngc" -p tsconfig-aot.json
|
||||
</code-example>
|
||||
|
||||
@ -405,7 +409,9 @@ The cookbook configuration file looks like this.
|
||||
|
||||
|
||||
接下来，在项目根目录新建一个配置文件（`rollup-config.js`），来告诉Rollup如何处理应用。
|
||||
本烹饪书配置文件是这样的：<code-example path="aot-compiler/rollup-config.js" title="rollup-config.js" linenums="false">
|
||||
本烹饪书配置文件是这样的：
|
||||
|
||||
<code-example path="aot-compiler/rollup-config.js" title="rollup-config.js" linenums="false">
|
||||
</code-example>
|
||||
|
||||
This config file tells Rollup that the app entry point is `src/app/main.js` .
|
||||
@ -454,7 +460,9 @@ the `plugins` array in `rollup-config.js`:
|
||||
|
||||
幸运的是，有一个Rollup插件，它会修改*RxJS*，以使用Rollup所需的ES`import`和`export`语句。
|
||||
然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。
|
||||
它的用法很简单。把下列代码添加到`rollup-config.js`的`plugins`数组中：<code-example path="aot-compiler/rollup-config.js" region="commonjs" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
|
||||
它的用法很简单。把下列代码添加到`rollup-config.js`的`plugins`数组中：
|
||||
|
||||
<code-example path="aot-compiler/rollup-config.js" region="commonjs" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
|
||||
</code-example>
|
||||
|
||||
*Minification*
|
||||
@ -468,7 +476,9 @@ Add the following to the `plugins` array:
|
||||
|
||||
Rollup做摇树优化时会大幅减小代码体积。最小化过程则会让它更小。
|
||||
本烹饪宝典依赖于Rollup插件*uglify*来最小化并混淆代码。
|
||||
把下列代码添加到`plugins`数组中：<code-example path="aot-compiler/rollup-config.js" region="uglify" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
|
||||
把下列代码添加到`plugins`数组中：
|
||||
|
||||
<code-example path="aot-compiler/rollup-config.js" region="uglify" title="rollup-config.js (CommonJs to ES2015 Plugin)" linenums="false">
|
||||
</code-example>
|
||||
|
||||
<div class="l-sub-section">
|
||||
@ -502,7 +512,9 @@ Execute the Rollup process with this command:
|
||||
|
||||
Windows users should surround the `rollup` command in double quotes:
|
||||
|
||||
Windows用户要把`rollup`命令放进双引号中：<code-example language="none" class="code-shell">
|
||||
Windows用户要把`rollup`命令放进双引号中：
|
||||
|
||||
<code-example language="none" class="code-shell">
|
||||
"node_modules/.bin/rollup" -c rollup-config.js
|
||||
</code-example>
|
||||
|
||||
@ -521,7 +533,9 @@ Instead, load the bundle file using a single `<script>` tag **_after_** the `</b
|
||||
|
||||
加载所生成的应用捆文件，并不需要使用像SystemJS这样的模块加载器。
|
||||
移除与SystemJS有关的那些脚本吧。
|
||||
改用`<script>`标签来加载这些捆文件：<code-example path="aot-compiler/src/index.html" region="bundle" title="index.html (load bundle)" linenums="false">
|
||||
改用`<script>`标签来加载这些捆文件：
|
||||
|
||||
<code-example path="aot-compiler/src/index.html" region="bundle" title="index.html (load bundle)" linenums="false">
|
||||
</code-example>
|
||||
|
||||
{@a serve}
|
||||
@ -804,7 +818,9 @@ Edit your `tsconfig-aot.json` to fit your project's file structure.
|
||||
Rollup does the tree shaking as before.
|
||||
|
||||
|
||||
Rollup和以前一样，仍然进行摇树优化。<code-example path="toh-pt6/rollup-config.js" title="rollup-config.js" linenums="false">
|
||||
Rollup和以前一样，仍然进行摇树优化。
|
||||
|
||||
<code-example path="toh-pt6/rollup-config.js" title="rollup-config.js" linenums="false">
|
||||
</code-example>
|
||||
|
||||
{@a running-app}
|
||||
@ -824,7 +840,7 @@ Rollup和以前一样，仍然进行摇树优化。<code-example path="toh-pt6/r
|
||||
<a href="generated/zips/toh-pt6/toh-pt6.zip" target="_blank">Tour of Heroes' zip</a>
|
||||
and run `npm install` on it.
|
||||
|
||||
// TODO: Translate
|
||||
下列步骤假设你已经下载了<a href="generated/zips/toh-pt6/toh-pt6.zip" target="_blank">《英雄指南》的zip包</a>，并且在其中运行过了`npm install`。
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -156,7 +156,7 @@ During development you're likely to bootstrap the `AppModule` in a `main.ts` fil
|
||||
|
||||
The NgModule — a class decorated with `@NgModule` — is a fundamental feature of Angular.
|
||||
|
||||
// TODO: Translate
|
||||
NgModule（一个带`@NgModule`装饰器的类）是 Angular 的基础特性之一。
|
||||
|
||||
JavaScript also has its own module system for managing collections of JavaScript objects.
|
||||
It's completely different and unrelated to the NgModule system.
|
||||
@ -288,7 +288,9 @@ that it acquires from a service.
|
||||
|
||||
{@a component-code}
|
||||
例如，`HeroListComponent`有一个`heroes`属性，它返回一个英雄数组，这个数组从一个服务获得。
|
||||
`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class">
|
||||
`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -318,7 +320,9 @@ A template looks like regular HTML, except for a few differences. Here is a
|
||||
template for our `HeroListComponent`:
|
||||
|
||||
|
||||
多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板：<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html">
|
||||
多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -381,7 +385,9 @@ Here's some metadata for `HeroListComponent`:
|
||||
|
||||
|
||||
在TypeScript中，我们用**装饰器 (decorator) **来附加元数据。
|
||||
下面就是`HeroListComponent`的一些元数据。<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata">
|
||||
下面就是`HeroListComponent`的一些元数据。
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -468,7 +474,9 @@ Angular 支持**数据绑定**，一种让模板的各部分与组件的各部
|
||||
The `HeroListComponent` [example](guide/architecture#templates) template has three forms:
|
||||
|
||||
|
||||
`HeroListComponent`[示例](guide/architecture#templates)模板中有三种形式：<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding">
|
||||
`HeroListComponent`[示例](guide/architecture#templates)模板中有三种形式：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -493,7 +501,9 @@ Here's an example from the `HeroDetailComponent` template:
|
||||
|
||||
|
||||
**双向数据绑定**是重要的第四种绑定形式，它使用`ngModel`指令组合了属性绑定和事件绑定的功能。
|
||||
下面是`HeroDetailComponent`模板的范例：<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
|
||||
下面是`HeroDetailComponent`模板的范例：
|
||||
|
||||
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -575,7 +585,9 @@ sometimes by name but more often as the target of an assignment or a binding.
|
||||
The [example template](guide/architecture#templates) uses two built-in structural directives:
|
||||
|
||||
|
||||
下面的[范例模板](guide/architecture#templates)中用到了两个内置的结构型指令：<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural">
|
||||
下面的[范例模板](guide/architecture#templates)中用到了两个内置的结构型指令：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -602,7 +614,9 @@ by setting its display value property and responding to change events.
|
||||
|
||||
|
||||
`ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。
|
||||
`ngModel`修改现有元素（一般是`<input>`）的行为：设置其显示属性值，并响应 change 事件。<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
|
||||
`ngModel`修改现有元素（一般是`<input>`）的行为：设置其显示属性值，并响应 change 事件。
|
||||
|
||||
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -680,7 +694,9 @@ Yet services are fundamental to any Angular application. Components are big cons
|
||||
Here's an example of a service class that logs to the browser console:
|
||||
|
||||
|
||||
下面是一个服务类的范例，用于把日志记录到浏览器的控制台：<code-example path="architecture/src/app/logger.service.ts" linenums="false" title="src/app/logger.service.ts (class)" region="class">
|
||||
下面是一个服务类的范例，用于把日志记录到浏览器的控制台：
|
||||
|
||||
<code-example path="architecture/src/app/logger.service.ts" linenums="false" title="src/app/logger.service.ts (class)" region="class">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -690,7 +706,9 @@ The `HeroService` depends on the `Logger` service and another `BackendService` t
|
||||
|
||||
|
||||
下面是`HeroService`类，用于获取英雄数据，并通过一个已解析的[承诺 (Promise)](http://exploringjs.com/es6/ch_promises.html) 返回它们。
|
||||
`HeroService`还依赖于`Logger`服务和另一个用于处理服务器通讯的`BackendService`服务。<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class">
|
||||
`HeroService`还依赖于`Logger`服务和另一个用于处理服务器通讯的`BackendService`服务。
|
||||
|
||||
<code-example path="architecture/src/app/hero.service.ts" linenums="false" title="src/app/hero.service.ts (class)" region="class">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -796,7 +814,9 @@ In general, add providers to the [root module](guide/architecture#modules) so th
|
||||
the same instance of a service is available everywhere.
|
||||
|
||||
|
||||
但通常会把提供商添加到[根模块](guide/architecture#modules)上，以便在任何地方都使用服务的同一个实例。<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers">
|
||||
但通常会把提供商添加到[根模块](guide/architecture#modules)上，以便在任何地方都使用服务的同一个实例。
|
||||
|
||||
<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -804,7 +824,9 @@ the same instance of a service is available everywhere.
|
||||
Alternatively, register at a component level in the `providers` property of the `@Component` metadata:
|
||||
|
||||
|
||||
或者，也可以在`@Component`元数据中的`providers`属性中把它注册在组件层：<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers">
|
||||
或者，也可以在`@Component`元数据中的`providers`属性中把它注册在组件层：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -86,7 +86,9 @@ named <code>attribute-directives</code>.
|
||||
Create the following source file in the indicated folder:
|
||||
|
||||
|
||||
在指定的文件夹下创建下列源码文件：<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts">
|
||||
在指定的文件夹下创建下列源码文件：
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -188,7 +190,9 @@ Put the template in its own <code>app.component.html</code>
|
||||
file that looks like this:
|
||||
|
||||
|
||||
我们把这个模板放到它的<code>app.component.html</code>文件中，就像这样：<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html">
|
||||
我们把这个模板放到它的<code>app.component.html</code>文件中，就像这样：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -196,7 +200,9 @@ file that looks like this:
|
||||
Now reference this template in the `AppComponent`:
|
||||
|
||||
|
||||
现在，在`AppComponent`中引用这个模板：<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts">
|
||||
现在，在`AppComponent`中引用这个模板：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -207,7 +213,9 @@ recognizes the directive when it encounters `myHighlight` in the template.
|
||||
|
||||
|
||||
接下来，添加了一个`import`语句来获得`Highlight`指令类，并把这个类添加到 NgModule 元数据的`declarations`数组中。
|
||||
这样，当 Angular 在模板中遇到`myHighlight`时，就能认出这是指令了。<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts">
|
||||
这样，当 Angular 在模板中遇到`myHighlight`时，就能认出这是指令了。
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -279,7 +287,9 @@ Begin by adding `HostListener` to the list of imported symbols;
|
||||
add the `Input` symbol as well because you'll need it soon.
|
||||
|
||||
|
||||
先把`HostListener`加进导入列表中，同时再添加`Input`符号，因为我们很快就要用到它。<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports">
|
||||
先把`HostListener`加进导入列表中，同时再添加`Input`符号，因为我们很快就要用到它。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -288,7 +298,9 @@ Then add two eventhandlers that respond when the mouse enters or leaves,
|
||||
each adorned by the `HostListener` decorator.
|
||||
|
||||
|
||||
然后使用`HostListener`装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods">
|
||||
然后使用`HostListener`装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-methods)" region="mouse-methods">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -326,7 +338,9 @@ The handlers delegate to a helper method that sets the color on the DOM element,
|
||||
which you declare and initialize in the constructor.
|
||||
|
||||
|
||||
这些处理器委托给了一个辅助方法，它用于为DOM元素设置颜色，`el`就是你在构造器中声明和初始化过的。<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor">
|
||||
这些处理器委托给了一个辅助方法，它用于为DOM元素设置颜色，`el`就是你在构造器中声明和初始化过的。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -334,7 +348,9 @@ which you declare and initialize in the constructor.
|
||||
Here's the updated directive in full:
|
||||
|
||||
|
||||
下面是修改后的指令代码：<code-example path="attribute-directives/src/app/highlight.directive.2.ts" title="src/app/highlight.directive.ts">
|
||||
下面是修改后的指令代码：
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" title="src/app/highlight.directive.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -364,7 +380,9 @@ In this section, you give the developer the power to set the highlight color whi
|
||||
Start by adding a `highlightColor` property to the directive class like this:
|
||||
|
||||
|
||||
我们先把`highlightColor`属性添加到指令类中，就像这样：<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color">
|
||||
我们先把`highlightColor`属性添加到指令类中，就像这样：
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -388,7 +406,9 @@ Without that input metadata, Angular rejects the binding; see [below](guide/attr
|
||||
Try it by adding the following directive binding variations to the `AppComponent` template:
|
||||
|
||||
|
||||
试试把下列指令绑定变量添加到`AppComponent`的模板中：<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-1">
|
||||
试试把下列指令绑定变量添加到`AppComponent`的模板中：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-1">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -396,7 +416,9 @@ Try it by adding the following directive binding variations to the `AppComponent
|
||||
Add a `color` property to the `AppComponent`.
|
||||
|
||||
|
||||
把`color`属性添加到`AppComponent`中：<code-example path="attribute-directives/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
|
||||
把`color`属性添加到`AppComponent`中：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -404,7 +426,9 @@ Add a `color` property to the `AppComponent`.
|
||||
Let it control the highlight color with a property binding.
|
||||
|
||||
|
||||
让它通过属性绑定来控制高亮颜色。<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-2">
|
||||
让它通过属性绑定来控制高亮颜色。
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.1.html" linenums="false" title="src/app/app.component.html (excerpt)" region="color-2">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -412,7 +436,9 @@ Let it control the highlight color with a property binding.
|
||||
That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this.
|
||||
|
||||
|
||||
很不错，但还可以更好。我们可以在应用该指令时在同一个属性中设置颜色，就像这样：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
|
||||
很不错，但还可以更好。我们可以在应用该指令时在同一个属性中设置颜色，就像这样：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -429,7 +455,9 @@ That's a crisp, compact syntax.
|
||||
You'll have to rename the directive's `highlightColor` property to `myHighlight` because that's now the color property binding name.
|
||||
|
||||
|
||||
我们还要把该指令的`highlightColor`改名为`myHighlight`，因为它是颜色属性目前的绑定名。<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2">
|
||||
我们还要把该指令的`highlightColor`改名为`myHighlight`，因为它是颜色属性目前的绑定名。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -452,7 +480,9 @@ Fortunately you can name the directive property whatever you want _and_ **_alias
|
||||
Restore the original property name and specify the selector as the alias in the argument to `@Input`.
|
||||
|
||||
|
||||
恢复原始属性名，并在`@Input`的参数中把选择器`myHighlight`指定为别名。<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color">
|
||||
恢复原始属性名，并在`@Input`的参数中把选择器`myHighlight`指定为别名。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -465,7 +495,9 @@ _Outside_ the directive, where you bind to it, it's known as `myHighlight`.
|
||||
You get the best of both worlds: the property name you want and the binding syntax you want:
|
||||
|
||||
|
||||
这是最好的结果：理想的内部属性名，理想的绑定语法：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
|
||||
这是最好的结果：理想的内部属性名，理想的绑定语法：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -475,7 +507,9 @@ If someone neglects to bind to `highlightColor`, highlight in red:
|
||||
|
||||
|
||||
现在，我们绑定到了`highlightColor`属性，并修改`onMouseEnter()`方法来使用它。
|
||||
如果有人忘了绑定到`highlightColor`，那就用红色进行高亮。<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter">
|
||||
如果有人忘了绑定到`highlightColor`，那就用红色进行高亮。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -483,7 +517,9 @@ If someone neglects to bind to `highlightColor`, highlight in red:
|
||||
Here's the latest version of the directive class.
|
||||
|
||||
|
||||
这是最终版本的指令类。<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (excerpt)">
|
||||
这是最终版本的指令类。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (excerpt)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -503,7 +539,9 @@ lets you pick the highlight color with a radio button and bind your color choice
|
||||
Update <code>app.component.html</code> as follows:
|
||||
|
||||
|
||||
把`app.component.html`修改成这样：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (v2)" region="v2">
|
||||
把`app.component.html`修改成这样：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (v2)" region="v2">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -511,7 +549,9 @@ Update <code>app.component.html</code> as follows:
|
||||
Revise the `AppComponent.color` so that it has no initial value.
|
||||
|
||||
|
||||
修改`AppComponent.color`，让它不再有初始值。<code-example path="attribute-directives/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
|
||||
修改`AppComponent.color`，让它不再有初始值。
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (class)" region="class">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -542,7 +582,9 @@ Let the template developer set the default color.
|
||||
Add a second **input** property to `HighlightDirective` called `defaultColor`:
|
||||
|
||||
|
||||
把第二个名叫`defaultColor`的**输入**属性添加到`HighlightDirective`中：<code-example path="attribute-directives/src/app/highlight.directive.ts(defaultColor)" linenums="false" title="src/app/highlight.directive.ts (defaultColor)(excerpt)">
|
||||
把第二个名叫`defaultColor`的**输入**属性添加到`HighlightDirective`中：
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.ts(defaultColor)" linenums="false" title="src/app/highlight.directive.ts (defaultColor)(excerpt)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -551,7 +593,9 @@ Revise the directive's `onMouseEnter` so that it first tries to highlight with t
|
||||
then with the `defaultColor`, and falls back to "red" if both properties are undefined.
|
||||
|
||||
|
||||
修改该指令的`onMouseEnter`，让它首先尝试使用`highlightColor`进行高亮，然后用`defaultColor`，如果它们都没有指定，那就用红色作为后备。<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter">
|
||||
修改该指令的`onMouseEnter`，让它首先尝试使用`highlightColor`进行高亮，然后用`defaultColor`，如果它们都没有指定，那就用红色作为后备。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -566,7 +610,9 @@ and fall back to "violet" as the default color.
|
||||
|
||||
|
||||
像组件一样，你也可以绑定到指令的很多属性，只要把它们依次写在模板中就行了。
|
||||
开发者可以绑定到`AppComponent.color`，并且用紫罗兰色作为默认颜色，代码如下：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (defaultColor)" region="defaultColor">
|
||||
开发者可以绑定到`AppComponent.color`，并且用紫罗兰色作为默认颜色，代码如下：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (defaultColor)" region="defaultColor">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -637,7 +683,9 @@ In this demo, the `hightlightColor` property is an ***input*** property of
|
||||
the `HighlightDirective`. You've seen it applied without an alias:
|
||||
|
||||
|
||||
在这个例子中`hightlightColor`是`HighlightDirective`的一个***输入型***属性。我们见过它没有用别名时的代码：<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
|
||||
在这个例子中`hightlightColor`是`HighlightDirective`的一个***输入型***属性。我们见过它没有用别名时的代码：
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -645,7 +693,9 @@ the `HighlightDirective`. You've seen it applied without an alias:
|
||||
You've seen it with an alias:
|
||||
|
||||
|
||||
也见过用别名时的代码：<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
|
||||
也见过用别名时的代码：
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -703,7 +753,9 @@ You can tell if `@Input` is needed by the position of the property name in a bin
|
||||
Now apply that reasoning to the following example:
|
||||
|
||||
|
||||
试用此原理分析下列范例：<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
|
||||
试用此原理分析下列范例：
|
||||
|
||||
<code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -103,7 +103,9 @@ that you translate into Spanish:
|
||||
Add the `i18n` attribute to the tag to mark it for translation.
|
||||
|
||||
|
||||
添加`i18n`属性到该标签上，把它标记为需要翻译的文本。<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute" title="src/app/app.component.html" linenums="false">
|
||||
添加`i18n`属性到该标签上，把它标记为需要翻译的文本。
|
||||
|
||||
<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
{@a help-translator}
|
||||
@ -118,19 +120,20 @@ Assign a description to the i18n attribute:
|
||||
|
||||
|
||||
翻译人员可能需要待翻译文本的描述才能翻译准确。
|
||||
为i18n属性添加描述：<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute-desc" title="src/app/app.component.html" linenums="false">
|
||||
为i18n属性添加描述：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute-desc" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
In order to deliver a correct translation, the translator may need to
|
||||
know the _meaning_ or _intent_ of the text within _this particular_ application context.
|
||||
|
||||
为了给出正确的翻译，翻译者需要知道你这段文本在特定情境下的 *真实意图*。
|
||||
在描述的前面，为指定的字符串添加一些上下文含义，用`|`将其与描述文字隔开(`<意图>|<描述>`)。
|
||||
|
||||
You add context by beginning the string with the _meaning_ and
|
||||
separating it from the _description_ with the `|` character (`<meaning>|<description>`):
|
||||
|
||||
// TODO: Translate
|
||||
在描述的前面，我们为指定的字符串添加一些上下文含义，用`|`将其与描述文字隔开(`<意图>|<描述>`)。
|
||||
|
||||
<code-example path="i18n/src/app/app.component.1.html" region="i18n-attribute-meaning" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
@ -149,6 +152,7 @@ Angular的提取工具在翻译源文件中保留**含义**和**描述**，以
|
||||
|
||||
### Set a custom _id_ to improve search and maintenance
|
||||
|
||||
### 设置一个自定义的`id`来提升可搜索性和可维护性
|
||||
// TODO: Translate
|
||||
|
||||
The angular _i18n_ extractor tool generates a file with a _translation unit_ entry for each `i18n` attribute in a template. By default, it assigns each translation unit a unique _id_ such as this one:
|
||||
@ -486,7 +490,9 @@ Open `messages.es.xlf` and find the first `<trans-unit>` section:
|
||||
|
||||
|
||||
我们不需要任何编辑器或者西班牙语知识就可以轻易的翻译本例子文件。
|
||||
打开`messages.es.xlf`并找到`<trans-unit>`节点：<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-hello" title="src/locale/messages.es.xlf (<trans-unit>)" linenums="false">
|
||||
打开`messages.es.xlf`并找到`<trans-unit>`节点：
|
||||
|
||||
<code-example path="i18n/src/locale/messages.es.xlf.html" region="translated-hello" title="src/locale/messages.es.xlf (<trans-unit>)" linenums="false">
|
||||
</code-example>
|
||||
|
||||
This XML element represents the translation of the `<h1>` greeting tag you marked with the `i18n` attribute.
|
||||
@ -494,9 +500,11 @@ This XML element represents the translation of the `<h1>` greeting tag you marke
|
||||
这个XML元素代表了你使用`i18n`属性标记的`<h1>`问候语标签的翻译。
|
||||
|
||||
<div class="l-sub-section">
|
||||
// TODO: Translate
|
||||
Note that the translation unit `id=introductionHeader` is derived from the _custom_ `id`](#custom-id "Set a custom id") that you set earlier, but **without the `@@` prefix** required in the source HTML.
|
||||
|
||||
|
||||
注意，翻译单元`id=introductionHeader`派生自[*自定义*`id`](#custom-id "设置自定义id")，那样设置起来更简单，但是在HTML源码中**不需要`@@`前缀**。
|
||||
|
||||
</div>
|
||||
|
||||
Using the _source_, _description_, and _meaning_ elements to guide your translation,
|
||||
|
||||
@ -555,7 +555,9 @@ The sneaky spy directive is simple, consisting almost entirely of `ngOnInit()` a
|
||||
that log messages to the parent via an injected `LoggerService`.
|
||||
|
||||
|
||||
我们这个鬼鬼祟祟的侦探指令很简单，几乎完全由`ngOnInit()`和`ngOnDestroy()`钩子组成，它通过一个注入进来的`LoggerService`来把消息记录到父组件中去。<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" title="src/app/spy.directive.ts" linenums="false">
|
||||
我们这个鬼鬼祟祟的侦探指令很简单，几乎完全由`ngOnInit()`和`ngOnDestroy()`钩子组成，它通过一个注入进来的`LoggerService`来把消息记录到父组件中去。
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" title="src/app/spy.directive.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -725,7 +727,9 @@ The example component, `OnChangesComponent`, has two input properties: `hero` an
|
||||
The host `OnChangesParentComponent` binds to them like this:
|
||||
|
||||
|
||||
宿主`OnChangesParentComponent`绑定了它们，就像这样：<code-example path="lifecycle-hooks/src/app/on-changes-parent.component.html" region="on-changes" title="src/app/on-changes-parent.component.html">
|
||||
宿主`OnChangesParentComponent`绑定了它们，就像这样：
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/on-changes-parent.component.html" region="on-changes" title="src/app/on-changes-parent.component.html">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -853,7 +857,9 @@ which can only be reached by querying for the child view via the property decora
|
||||
The `doSomething()` method updates the screen when the hero name exceeds 10 characters.
|
||||
|
||||
|
||||
当英雄的名字超过10个字符时，`doSomething()`方法就会更新屏幕。<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false">
|
||||
当英雄的名字超过10个字符时，`doSomething()`方法就会更新屏幕。
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="do-something" title="AfterViewComponent (doSomething)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -1004,7 +1010,9 @@ which can only be reached by querying for them via the property decorated with
|
||||
[@ContentChild](api/core/ContentChild).
|
||||
|
||||
|
||||
下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/ContentChild)装饰器的属性来查询到“子级内容”。<code-example path="lifecycle-hooks/src/app/after.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">
|
||||
下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/ContentChild)装饰器的属性来查询到“子级内容”。
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/after.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
@ -3631,7 +3631,9 @@ If your app had many feature areas, the app component trees might look like this
|
||||
Add the following `crisis-center.component.ts` to the `crisis-center` folder:
|
||||
|
||||
|
||||
往`crisis-center`目录下添加下列`crisis-center.component.ts`文件：<code-example path="router/src/app/crisis-center/crisis-center.component.ts" linenums="false" title="src/app/crisis-center/crisis-center.component.ts ">
|
||||
往`crisis-center`目录下添加下列`crisis-center.component.ts`文件：
|
||||
|
||||
<code-example path="router/src/app/crisis-center/crisis-center.component.ts" linenums="false" title="src/app/crisis-center/crisis-center.component.ts ">
|
||||
</code-example>
|
||||
|
||||
The `CrisisCenterComponent` has the following in common with the `AppComponent`:
|
||||
|
||||
@ -2321,7 +2321,9 @@ Learn more about the `FormsModule` and `ngModel` in the
|
||||
Here's how to import the `FormsModule` to make `[(ngModel)]` available.
|
||||
|
||||
|
||||
导入`FormsModule`并让`[(ngModel)]`可用的代码如下：<code-example path="template-syntax/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (FormsModule import)" >
|
||||
导入`FormsModule`并让`[(ngModel)]`可用的代码如下：
|
||||
|
||||
<code-example path="template-syntax/src/app/app.module.1.ts" linenums="false" title="src/app/app.module.ts (FormsModule import)" >
|
||||
</code-example>
|
||||
|
||||
#### Inside <span class="syntax">[(ngModel)]</span>
|
||||
|
||||
@ -93,7 +93,9 @@ add `HttpModule` to the `imports` list of the `AppModule`.
|
||||
|
||||
|
||||
我们要能从本应用的任何地方访问这些服务，就要把`HttpModule`添加到`AppModule`的`imports`列表中。
|
||||
这里同时也是我们引导应用及其根组件`AppComponent`的地方。<code-example path="toh-pt6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)">
|
||||
这里同时也是我们引导应用及其根组件`AppComponent`的地方。
|
||||
|
||||
<code-example path="toh-pt6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -122,7 +124,9 @@ a mock service, the *in-memory web API*.
|
||||
Update <code>src/app/app.module.ts</code> with this version, which uses the mock service:
|
||||
|
||||
|
||||
修改<code>src/app/app.module.ts</code>，让它使用这个模拟服务：<code-example path="toh-pt6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)">
|
||||
修改<code>src/app/app.module.ts</code>，让它使用这个模拟服务：
|
||||
|
||||
<code-example path="toh-pt6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -135,7 +139,9 @@ to the module `imports`, effectively replacing the `Http` client's XHR backend
|
||||
导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
|
||||
`InMemoryWebApiModule`将`Http`客户端默认的后端服务 —
|
||||
这是一个辅助服务，负责与远程服务器对话 —
|
||||
替换成了*内存 Web API*服务：<code-example path="toh-pt6/src/app/app.module.ts" region="in-mem-web-api">
|
||||
替换成了*内存 Web API*服务：
|
||||
|
||||
<code-example path="toh-pt6/src/app/app.module.ts" region="in-mem-web-api">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -146,7 +152,9 @@ Add the file `in-memory-data.service.ts` in `app` with the following content:
|
||||
|
||||
|
||||
`forRoot()`配置方法需要`InMemoryDataService`类实例，用来向内存数据库填充数据：
|
||||
往`app`目录下新增一个文件`in-memory-data.service.ts`，填写下列内容：<code-example path="toh-pt6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false">
|
||||
往`app`目录下新增一个文件`in-memory-data.service.ts`，填写下列内容：
|
||||
|
||||
<code-example path="toh-pt6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -174,7 +182,9 @@ Added hero "Zero" to confirm that the data service can handle a hero with `id==0
|
||||
In the current `HeroService` implementation, a Promise resolved with mock heroes is returned.
|
||||
|
||||
|
||||
在目前的`HeroService`的实现中，返回的是一个能解析（resolve）成模拟英雄列表的承诺（Promise）。<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (old getHeroes)">
|
||||
在目前的`HeroService`的实现中，返回的是一个能解析（resolve）成模拟英雄列表的承诺（Promise）。
|
||||
|
||||
<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (old getHeroes)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -189,7 +199,9 @@ fetching heroes with an HTTP client, which must be an asynchronous operation.
|
||||
Now convert `getHeroes()` to use HTTP.
|
||||
|
||||
|
||||
现在，我们把`getHeroes()`换成使用 HTTP。<code-example path="toh-pt6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)">
|
||||
现在，我们把`getHeroes()`换成使用 HTTP。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -197,7 +209,9 @@ Now convert `getHeroes()` to use HTTP.
|
||||
Update the import statements as follows:
|
||||
|
||||
|
||||
更新后的导入声明如下：<code-example path="toh-pt6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)">
|
||||
更新后的导入声明如下：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -222,7 +236,9 @@ Angular 的`http.get`返回一个 RxJS 的`Observable`对象。
|
||||
For now, you've converted the `Observable` to a `Promise` using the `toPromise` operator.
|
||||
|
||||
|
||||
*现在*，我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象，回到已经熟悉的地盘。<code-example path="toh-pt6/src/app/hero.service.ts" region="to-promise">
|
||||
*现在*，我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象，回到已经熟悉的地盘。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="to-promise">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -238,7 +254,9 @@ That's as easy as importing them from the RxJS library like this:
|
||||
|
||||
有很多像`toPromise`这样的操作符，用于扩展`Observable`，为其添加有用的能力。
|
||||
如果我们希望得到那些能力，就得自己添加那些操作符。
|
||||
那很容易，只要从 RxJS 库中导入它们就可以了，就像这样：<code-example path="toh-pt6/src/app/hero.service.ts" region="rxjs">
|
||||
那很容易，只要从 RxJS 库中导入它们就可以了，就像这样：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="rxjs">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -301,7 +319,9 @@ It receives a Promise of *heroes* just as it did before.
|
||||
At the end of `getHeroes()`, you `catch` server failures and pass them to an error handler.
|
||||
|
||||
|
||||
在`getHeroes()`的最后，我们`catch`了服务器的失败信息，并把它们传给了错误处理器：<code-example path="toh-pt6/src/app/hero.service.ts" region="catch">
|
||||
在`getHeroes()`的最后，我们`catch`了服务器的失败信息，并把它们传给了错误处理器：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="catch">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -311,7 +331,9 @@ You must anticipate HTTP failures, as they happen frequently for reasons beyond
|
||||
|
||||
|
||||
这是一个关键的步骤！
|
||||
我们必须预料到 HTTP 请求会失败，因为有太多我们无法控制的原因可能导致它们频繁出现各种错误。<code-example path="toh-pt6/src/app/hero.service.ts" region="handleError">
|
||||
我们必须预料到 HTTP 请求会失败，因为有太多我们无法控制的原因可能导致它们频繁出现各种错误。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="handleError">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -408,7 +430,9 @@ At the end of the hero detail template, add a save button with a `click` event
|
||||
binding that invokes a new component method named `save()`.
|
||||
|
||||
|
||||
我们先来确保对英雄名字的编辑不会丢失。先在英雄详情模板的底部添加一个保存按钮，它绑定了一个`click`事件，事件绑定会调用组件中一个名叫`save()`的新方法：<code-example path="toh-pt6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)">
|
||||
我们先来确保对英雄名字的编辑不会丢失。先在英雄详情模板的底部添加一个保存按钮，它绑定了一个`click`事件，事件绑定会调用组件中一个名叫`save()`的新方法：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -417,7 +441,9 @@ Add the following `save()` method, which persists hero name changes using the he
|
||||
`update()` method and then navigates back to the previous view.
|
||||
|
||||
|
||||
`save()`方法使用 hero 服务的`update()`方法来持久化对英雄名字的修改，然后导航回前一个视图：<code-example path="toh-pt6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)">
|
||||
`save()`方法使用 hero 服务的`update()`方法来持久化对英雄名字的修改，然后导航回前一个视图：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -431,7 +457,9 @@ The overall structure of the `update()` method is similar to that of
|
||||
|
||||
|
||||
|
||||
`update()`方法的大致结构与`getHeroes()`类似，不过我们使用 HTTP 的 `put()` 方法来把修改持久化到服务端：<code-example path="toh-pt6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)">
|
||||
`update()`方法的大致结构与`getHeroes()`类似，不过我们使用 HTTP 的 `put()` 方法来把修改持久化到服务端：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -464,7 +492,9 @@ Insert the following into the heroes component HTML, just after
|
||||
the heading:
|
||||
|
||||
|
||||
把下列代码插入 heroes 组件的 HTML 中，放在标题的下面：<code-example path="toh-pt6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)">
|
||||
把下列代码插入 heroes 组件的 HTML 中，放在标题的下面：
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -473,7 +503,9 @@ In response to a click event, call the component's click handler and then
|
||||
clear the input field so that it's ready for another name.
|
||||
|
||||
|
||||
当点击事件触发时，我们调用组件的点击处理器，然后清空这个输入框，以便用来输入另一个名字。<code-example path="toh-pt6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)">
|
||||
当点击事件触发时，我们调用组件的点击处理器，然后清空这个输入框，以便用来输入另一个名字。
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -509,7 +541,9 @@ Add the following button element to the heroes component HTML, after the hero
|
||||
name in the repeated `<li>` element.
|
||||
|
||||
|
||||
把这个按钮元素添加到英雄列表组件的 HTML 中，把它放在`<li>`标签中的英雄名的后面：<code-example path="toh-pt6/src/app/heroes.component.html" region="delete">
|
||||
把这个按钮元素添加到英雄列表组件的 HTML 中，把它放在`<li>`标签中的英雄名的后面：
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes.component.html" region="delete">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -517,7 +551,9 @@ name in the repeated `<li>` element.
|
||||
The `<li>` element should now look like this:
|
||||
|
||||
|
||||
`<li>`元素应该变成了这样：<code-example path="toh-pt6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)">
|
||||
`<li>`元素应该变成了这样：
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -533,7 +569,9 @@ select the hero that the user will delete.
|
||||
The logic of the `delete()` handler is a bit trickier:
|
||||
|
||||
|
||||
`delete()`处理器的逻辑略复杂：<code-example path="toh-pt6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)">
|
||||
`delete()`处理器的逻辑略复杂：
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -551,7 +589,9 @@ add this CSS:
|
||||
|
||||
|
||||
我们希望删除按钮被放在英雄条目的最右边。
|
||||
于是 CSS 变成了这样：<code-example path="toh-pt6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)">
|
||||
于是 CSS 变成了这样：
|
||||
|
||||
<code-example path="toh-pt6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -563,7 +603,9 @@ add this CSS:
|
||||
Add the hero service's `delete()` method, which uses the `delete()` HTTP method to remove the hero from the server:
|
||||
|
||||
|
||||
hero 服务的`delete()`方法使用 HTTP 的 `delete()` 方法来从服务器上移除该英雄：<code-example path="toh-pt6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)">
|
||||
hero 服务的`delete()`方法使用 HTTP 的 `delete()` 方法来从服务器上移除该英雄：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -642,7 +684,9 @@ As the user types a name into a search box, you'll make repeated HTTP requests f
|
||||
Start by creating `HeroSearchService` that sends search queries to the server's web API.
|
||||
|
||||
|
||||
我们先创建`HeroSearchService`服务，它会把搜索请求发送到我们服务器上的 Web API。<code-example path="toh-pt6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts">
|
||||
我们先创建`HeroSearchService`服务，它会把搜索请求发送到我们服务器上的 Web API。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -675,7 +719,9 @@ Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`
|
||||
The component template is simple—just a text box and a list of matching search results.
|
||||
|
||||
|
||||
组件模板很简单，就是一个输入框和一个显示匹配的搜索结果的列表。<code-example path="toh-pt6/src/app/hero-search.component.html" title="src/app/hero-search.component.html">
|
||||
组件模板很简单，就是一个输入框和一个显示匹配的搜索结果的列表。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-search.component.html" title="src/app/hero-search.component.html">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -707,7 +753,9 @@ The `async` pipe subscribes to the `Observable` and produces the array of heroes
|
||||
Create the `HeroSearchComponent` class and metadata.
|
||||
|
||||
|
||||
该创建`HeroSearchComponent`类及其元数据了。<code-example path="toh-pt6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts">
|
||||
该创建`HeroSearchComponent`类及其元数据了。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -719,7 +767,9 @@ Create the `HeroSearchComponent` class and metadata.
|
||||
Focus on the `searchTerms`:
|
||||
|
||||
|
||||
仔细看下这个`searchTerms`：<code-example path="toh-pt6/src/app/hero-search.component.ts" region="searchTerms">
|
||||
仔细看下这个`searchTerms`：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-search.component.ts" region="searchTerms">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -744,7 +794,9 @@ of search terms into a stream of `Hero` arrays and assign the result to the `her
|
||||
|
||||
|
||||
`Subject`也是一个`Observable`对象。
|
||||
我们要把搜索词的流转换成`Hero`数组的流，并把结果赋值给`heroes`属性。<code-example path="toh-pt6/src/app/hero-search.component.ts" region="search">
|
||||
我们要把搜索词的流转换成`Hero`数组的流，并把结果赋值给`heroes`属性。
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-search.component.ts" region="search">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -834,7 +886,9 @@ Here are all the RxJS imports that _this_ component needs:
|
||||
|
||||
|
||||
如果想要更多的RxJS功能，我们必须*导入*其所定义的库来扩展`Observable`对象，
|
||||
以下是*这个*模块所需导入的所有RxJS操作符：<code-example path="toh-pt6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false">
|
||||
以下是*这个*模块所需导入的所有RxJS操作符：
|
||||
|
||||
<code-example path="toh-pt6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
@ -859,7 +913,9 @@ loads and executes the library's script file which, in turn, adds the operator t
|
||||
Add the hero search HTML element to the bottom of the `DashboardComponent` template.
|
||||
|
||||
|
||||
将表示“英雄搜索”组件的 HTML 元素添加到`DashboardComponent`模版的最后面。<code-example path="toh-pt6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false">
|
||||
将表示“英雄搜索”组件的 HTML 元素添加到`DashboardComponent`模版的最后面。
|
||||
|
||||
<code-example path="toh-pt6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user