diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 54a5d4bb70..2a928141b4 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -78,7 +78,7 @@ The following table lists some of the key AngularJS template features with their the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you have to be specific about the source of the binding. - 当使用 `controller as` 语法时，该绑定需要用控制器的别名(`vm`)为前缀，这是因为我们不得不通过它来指定绑定源。 + 当使用 `controller as` 语法时，该绑定需要用控制器的别名(`vm`)为前缀，这是因为你不得不通过它来指定绑定源。 @@ -145,7 +145,7 @@ The following table lists some of the key AngularJS template features with their Many (but not all) of the built-in filters from AngularJS are built-in pipes in Angular. - 在 Angular 中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做**管道**了。 + 在 Angular 中，你使用类似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做**管道**了。 很多(但不是所有)AngularJS 中的内置过滤器也成了 Angular 中的内置管道。 For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below. @@ -545,7 +545,7 @@ AngularJS 为模板提供了七十多个内置指令。 Place the element's `href` property in square brackets and set it to a quoted template expression. 在 Angular 中，并没有内置的 *href* 指令，改用属性绑定。 - 我们把元素的 `href` 属性放在方括号中，并把它设成一个引号中的模板表达式。 + 把元素的 `href` 属性放在方括号中，并把它设成一个引号中的模板表达式。 For more information see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. @@ -646,7 +646,7 @@ AngularJS 为模板提供了七十多个内置指令。 and event binding (from the view to the component), thereby providing two-way binding. 在 Angular 中，**双向绑定**使用[()]标记出来，它被形象的比作“盒子中的香蕉”。 - 这种语法是一个简写形式，用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件)，因此，我们得到了双向绑定。 + 这种语法是一个简写形式，用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件)，就成了双向绑定。 For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) @@ -928,11 +928,11 @@ AngularJS 为模板提供了七十多个内置指令。 If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!" If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!" - 在这个例子中，如果 `favoriteHero` 没有设置，则 `ngSwitch` 的值是 `null`，我们会看到 - `*ngSwitchDefault` 中的段落“Please enter ...”。 - 如果 `favoriteHero` 被设置了，它就会通过调用一个组件方法来检查电影英雄。 - 如果该方法返回 `true`，我们就会看到“Excellent choice!”。 - 如果该方法返回 `false`，我们就会看到“No movie, sorry!”。 + 在这个例子中，如果 `favoriteHero` 没有设置，则 `ngSwitch` 的值是 `null`， + `*ngSwitchDefault` 中会显示 “Please enter ...”。 + 如果设置了 `favoriteHero`，应用就会通过调用一个组件方法来检查电影英雄。 + 如果该方法返回 `true`，就会显示 “Excellent choice!”。 + 如果该方法返回 `false`，就会显示 “No movie, sorry!”。 The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example. @@ -1276,13 +1276,13 @@ AngularJS 中的很多内置过滤器在 Angular 中都有对应的管道。 In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality. -无论在 AngularJS 还是 Angular 中，我们都要借助“模块”来把应用拆分成一些紧密相关的功能块。 +无论在 AngularJS 还是 Angular 中，你都要借助“模块”来把应用拆分成一些紧密相关的功能块。 In AngularJS, you write the code that provides the model and the methods for the view in a **controller**. In Angular, you build a **component**. -在 AngularJS 中，我们在**控制器**中写代码，来为视图提供模型和方法。 -在 Angular 中，我们创建**组件**。 +在 AngularJS 中，你要在**控制器**中写代码，来为视图提供模型和方法。 +在 Angular 中，你要创建**组件**。 Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript. @@ -1345,7 +1345,7 @@ The Angular code is shown using TypeScript. This is a nonissue in Angular because ES 2015 modules handle the namespacing for you. - 在 Angular 中我们不用担心这个问题，因为使用 ES 2015 的模块，模块会替我们处理命名空间问题。 + 在 Angular 中不用担心这个问题，因为使用 ES 2015 的模块，模块会替你处理命名空间问题。 For more information on modules, see the [Modules](guide/architecture#modules) section of the [Architecture Overview](guide/architecture). @@ -1445,7 +1445,7 @@ The Angular code is shown using TypeScript. The `@Component` decorator declares that the class is a component and provides metadata about that component such as its selector (or tag) and its template. - 在 Angular 中，我们往组件类上添加了一个装饰器，以提供任何需要的元数据。 + Angular 会往组件类上添加了一个装饰器，以提供所需的任何元数据。 `@Component` 装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)和模板。 This is how you associate a template with logic, which is defined in the component class. @@ -1478,7 +1478,7 @@ The Angular code is shown using TypeScript. In AngularJS, you write the code for the model and methods in a controller function. - 在 Angular1 中，我们在控制器函数中写模型和方法的代码。 + 在 Angular1 中，你在控制器函数中编写模型和方法的代码。 @@ -1492,7 +1492,7 @@ The Angular code is shown using TypeScript. In Angular, you create a component class. - 在 Angular 中，我们写组件类。 + 在 Angular 中，你要创建组件类。 NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class. @@ -1526,13 +1526,13 @@ The Angular code is shown using TypeScript. In AngularJS, you pass in any dependencies as controller function arguments. This example injects a `MovieService`. - 在 AngularJS 中，我们把所有依赖都作为控制器函数的参数。 - 在这个例子中，我们注入了一个 `MovieService`。 + 在 AngularJS 中，你把所有依赖都作为控制器函数的参数。 + 这个例子注入了一个 `MovieService`。 To guard against minification problems, tell Angular explicitly that it should inject an instance of the `MovieService` in the first parameter. - 我们还通过在第一个参数明确告诉 Angular 它应该注入一个 `MovieService` 的实例，以防止在最小化时出现问题。 + 为了防止在最小化时出现问题，第一个参数明确告诉 Angular 它应该注入一个 `MovieService` 的实例。 @@ -1548,8 +1548,8 @@ The Angular code is shown using TypeScript. This example injects a `MovieService`. The first parameter's TypeScript type tells Angular what to inject, even after minification. - 在 Angular 中，我们把依赖作为组件构造函数的参数传入。 - 在这个例子中，我们注入了一个 `MovieService`。 + 在 Angular 中，你要把依赖作为组件构造函数的参数传入。 + 这个例子注入了一个 `MovieService`。 即使在最小化之后，第一个参数的 TypeScript 类型也会告诉 Angular 它该注入什么。 For more information, see the [Dependency injection](guide/architecture#dependency-injection) @@ -1576,10 +1576,10 @@ merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component. -样式表美化我们的应用程序。 -在 AngularJS 中，我们为整个应用程序指定样式表。 -当应用程序成长一段时间之后，应用程序中很多部分的样式会被合并，导致无法预计的后果。 -在 Angular 中，我们仍然会为整个应用程序定义样式，不过现在也可以把样式表封装在特定的组件中。 +样式表让你的应用程序看起来更漂亮。 +在 AngularJS 中，你要为整个应用程序指定样式表。 +随着应用程序的不断成长，为各个部分指定的样式会被合并，导致无法预计的后果。 +在 Angular 中，你仍然要为整个应用程序定义样式，不过现在也可以把样式表封装在特定的组件中。 @@ -1624,7 +1624,7 @@ also encapsulate a style sheet within a specific component. AngularJS, uses a `link` tag in the head section of the `index.html` file to define the styles for the application. - 在 AngularJS 中，我们在 `index.html` 的 `head` 区使用 `link` 标签来为应用程序定义样式。 + AngularJS 在 `index.html` 的 `head` 区使用 `link` 标签来为应用程序定义样式。 @@ -1639,7 +1639,7 @@ also encapsulate a style sheet within a specific component. With the Angular CLI, you can configure your global styles in the `.angular-cli.json` file. You can rename the extension to `.scss` to use sass. - 使用 Angular CLI，我们可以在 `.angular-cli.json` 文件中配置全局样式。 + 使用 Angular CLI，你可以在 `.angular-cli.json` 文件中配置全局样式。 也可以把扩展名改为 `.scss` 来使用 sass。 ### StyleUrls @@ -1647,14 +1647,14 @@ also encapsulate a style sheet within a specific component. In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define a style sheet for a particular component. - 在 Angular 中，我们可以在 `@Component` 的元数据中使用 `styles` 或 `styleUrls` 属性来为一个特定的组件定义样式表。 + 在 Angular 中，你可以在 `@Component` 的元数据中使用 `styles` 或 `styleUrls` 属性来为一个特定的组件定义样式表。 This allows you to set appropriate styles for individual components that won’t leak into other parts of the application. - 这让我们可以为各个组件设置合适的样式，而不用担心它被泄漏到程序中的其它部分。 + 这让你可以为各个组件设置合适的样式，而不用担心它被泄漏到程序中的其它部分。 diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index edc49b01c2..2ab2abc18e 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -7,7 +7,7 @@ user interfaces transition smoothly between states with engaging animations that call attention where it's needed. Well-designed animations can make a UI not only more fun but also easier to use. -动画是现代 Web 应用设计中一个很重要的方面。我们希望用户界面能在不同的状态之间更平滑的转场。如果需要，还可以用适当的动画来吸引注意力。 +动画是现代 Web 应用设计中一个很重要的方面。好的用户界面要能在不同的状态之间更平滑的转场。如果需要，还可以用适当的动画来吸引注意力。 设计良好的动画不但会让 UI 更有趣，还会让它更容易使用。 ## Overview @@ -19,7 +19,7 @@ performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control. Angular 的动画系统赋予了制作各种动画效果的能力，以构建出与原生 CSS 动画性能相同的动画。 -我们也获得了额外的让动画逻辑与其它应用代码紧紧集成在一起的能力，这让动画可以被更容易的触发与控制。 +你还获得了额外的让动画逻辑与其它应用代码紧紧集成在一起的能力，这让动画可以被更容易的触发与控制。
@@ -90,7 +90,7 @@ The buttons trigger changes to the list that all of the example components see a You can build a simple animation that transitions an element between two states driven by a model attribute. -我们来构建一个简单的动画，它会让一个元素用模型驱动的方式在两个状态之间转场。 +你可以构建一个简单的动画，它会让一个元素用模型驱动的方式在两个状态之间转场。 Animations can be defined inside `@Component` metadata. @@ -112,14 +112,14 @@ hero is active, the element appears in a slightly larger size and lighter color. In this example, you are defining animation styles (color and transform) inline in the animation metadata. -在这个例子中，我们在元数据中用内联的方式定义了动画样式(`color` 和 `transform`)。在即将到来的一个 Angular 版本中，还将支持从组件的 CSS 样式表中提取样式。 +在这个例子中，你在元数据中用内联的方式定义了动画样式(`color` 和 `transform`)。在即将到来的一个 Angular 版本中，还将支持从组件的 CSS 样式表中提取样式。
Now, using the `[@triggerName]` syntax, attach the animation that you just defined to one or more elements in the component's template. -我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用 `[@triggerName]` 语法来把它附加到一个或多个元素上。 +现在，使用 `[@triggerName]` 语法来把刚刚定义的动画附加到组件模板中一个或多个元素上。 @@ -127,8 +127,8 @@ Here, the animation trigger applies to every element repeated by an `ngFor`. Eac the repeated elements animates independently. The value of the attribute is bound to the expression `hero.state` and is always either `active` or `inactive`. -这里，我们把该动画触发器添加到了由 `ngFor` 重复出来的每一个元素上。每个重复出来的元素都有独立的动画效果。 -然后把 `@triggerName` 属性(Attribute)的值设置成表达式 `hero.state`。这个值应该或者是 `inactive` 或者是 `active`，因为我们刚刚为它们俩定义过动画状态。 +这里，动画触发器被添加到了由 `ngFor` 重复出来的每一个元素上。每个重复出来的元素都有独立的动画效果。 +然后把 `@triggerName` 属性(Attribute)的值设置成表达式 `hero.state`。这个值应该是 `inactive` 或 `active` 之一。 With this setup, an animated transition appears whenever a hero object changes state. Here's the full component implementation: @@ -152,12 +152,12 @@ hero objects. The source of the state can be a simple object attribute, as it wa or it can be a value computed in a method. The important thing is that you can read it into the component's template. -动画状态是一个由程序代码中定义的字符串值。在上面的例子中，基于英雄对象的逻辑状态,我们使用了 `'active'` 和 `'inactive'` 这两种状态。 -状态的来源可以是像本例中这样简单的对象属性，也可以是由方法计算出来的值。重点是，我们得能从组件模板中读取它。 +动画状态是一个由程序代码中定义的字符串值。在上面的例子中，`'active'` 和 `'inactive'` 是基于英雄对象的逻辑状态的。 +状态的来源可以是像本例中这样简单的对象属性，也可以是由方法计算出来的值。重点是，你要能从组件模板中读取它。 You can define *styles* for each animation state: -我们可以为每个动画状态定义了*一组样式*： +你可以为每个动画状态定义了*一组样式*： @@ -310,7 +310,7 @@ using the hero state as the animation state. This lets you configure different transitions for entering and leaving based on what the state of the hero is: -通过把英雄的状态用作动画的状态，还能把该动画跟以前的转场动画组合成一个复合动画。这让我们能根据该英雄的当前状态为其配置不同的进场与离场动画： +通过把英雄的状态用作动画的状态，还能把该动画跟以前的转场动画组合成一个复合动画。这让你能根据该英雄的当前状态为其配置不同的进场与离场动画： * Inactive hero enter: `void => inactive` @@ -381,7 +381,7 @@ For example, elements often have widths and heights that depend on their content and the screen size. These properties are often tricky to animate with CSS. -有时候，我们想在动画中使用的尺寸类样式，它的值在开始运行之前都是不可知的。比如，元素的宽度和高度往往依赖于它们的内容和屏幕的尺寸。处理这些属性对 CSS 动画而言通常是相当棘手的。 +有时候，你在开始运行之前都无法知道某个样式属性的值。比如，元素的宽度和高度往往依赖于它们的内容和屏幕的尺寸。处理这些属性对 CSS 动画而言通常是相当棘手的。 In these cases, you can use a special `*` property value so that the value of the property is computed at runtime and then plugged into the animation. @@ -494,7 +494,7 @@ which marks the beginning of the animation, and one, which marks the end. This example adds some "bounce" to the enter and leave animations with keyframes: -在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”： +这个例子使用关键帧来为进场和离场动画添加一些“反弹效果”： @@ -519,19 +519,19 @@ offsets receive offsets `0`, `0.5`, and `1`. You've seen how to animate multiple style properties at the same time: just put all of them into the same `style()` definition. -我们已经知道该如何在同一时间段进行多个样式的动画了：只要把它们都放进同一个 `style()` 定义中就行了！ +你已经知道该如何在同一时间段进行多个样式的动画了：只要把它们都放进同一个 `style()` 定义中就行了！ But you may also want to configure different *timings* for animations that happen in parallel. For example, you may want to animate two CSS properties but use a different easing function for each one. -但我们也可能会希望为同时发生的几个动画配置不同的*时间线*。比如，同时对两个 CSS 属性做动画，但又得为它们定义不同的缓动函数。 +但你也可能会希望为同时发生的几个动画配置不同的*时间线*。比如，同时对两个 CSS 属性做动画，但又得为它们定义不同的缓动函数。 For this you can use animation *groups*. In this example, using groups both on enter and leave allows for two different timing configurations. Both are applied to the same element in parallel, but run independently of each other: -这种情况下就可以用动画*组*来解决了。在这个例子中，我们同时在进场和离场时使用了组，以便能让它们使用两种不同的时间线配置。 +这种情况下就可以用动画*组*来解决了。在这个例子中，同时在进场和离场时使用了组，以便能让它们使用两种不同的时间线配置。 它们被同时应用到同一个元素上，但又彼此独立运行： @@ -551,7 +551,7 @@ A callback is fired when an animation is started and also when it is done. In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook those callbacks like this: -对于例子中的这个关键帧，我们有一个叫做 `@flyInOut` 的 `trigger`。在那里我们可以挂钩到那些回调，比如： +对于例子中的这个关键帧，你有一个叫做 `@flyInOut` 的 `trigger`。在那里你可以挂钩到那些回调，比如： diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index eccbef9d31..bff4a9fe88 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -1,5 +1,7 @@ # The Ahead-of-Time (AOT) Compiler +# 预先（AOT）编译 + The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code. Angular 的“预先（AOT）编译器”会在构建期间把 Angular 应用的 HTML 和 TypeScript 代码编译成高效的 JavaScript 代码，之后浏览器就可以下载并快速运行这些代码。 @@ -26,14 +28,25 @@ An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by an _Angular compiler_. +Angular 应用由大量组件及其 HTML 模板组成。 +在浏览器渲染应用之前，组件和模板必须由 *Angular 编译器*转换成可执行的 JavaScript 代码。 + Angular offers two ways to compile your application: +Angular 提供了两种方式来编译你的应用： + 1. **_Just-in-Time_ (JIT)**, which compiles your app in the browser at runtime + **即时（JIT）编译**，它会在浏览器中运行时编译你的应用 + 1. **_Ahead-of-Time_ (AOT)**, which compiles your app at build time. + **预先（AOT）编译**，它会在构建时编译你的应用。 + JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands: +当你运行 *`build`* 或 *`serve`* 这两个 CLI 命令时 JIT 编译是默认选项： + ng build @@ -45,6 +58,8 @@ JIT compilation is the default when you run the _build-only_ or the _build-and-s For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands: +要进行 AOT 编译只要给这两个 CLI 命令添加 `--aot` 标志就行了： + ng build --aot @@ -56,6 +71,8 @@ For AOT compilation, append the `--aot` flags to the _build-only_ or the _build- The `--prod` meta-flag compiles with AOT by default. +`--prod` 标志也会默认使用 AOT 编译。 + See the [CLI documentation](https://github.com/angular/angular-cli/wiki) for details, especially the [`build` topic](https://github.com/angular/angular-cli/wiki/build). 要了解更多，请参见[CLI 文档](https://github.com/angular/angular-cli/wiki)，特别是[`build` 这个主题](https://github.com/angular/angular-cli/wiki/build)。 @@ -122,9 +139,14 @@ AOT 编译远在 HTML 模版和组件被服务到客户端之前，将它们编 ## Angular Compiler Options +## Angular 编译器选项 + You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of `"angularCompilerOptions"` object as shown below: +你可以通过在 `tsconfig.json` 文件中随 TypeScript 编译选项一起提供模板编译选项来控制应用的编译方式。 +这些模板编译选项都是作为 `"angularCompilerOptions"` 对象的成员指定的，代码如下： + ```json { @@ -146,25 +168,42 @@ You can control your app compilation by providing template compiler options in t This option tells the compiler not to produce `.metadata.json` files. The option is `false` by default. -`.metadata.json` files contain infomration needed by the template compiler from a `.ts` +这个选项告诉编译器不要生成 `.metadata.json` 文件，它默认是 `false`。 + +`.metadata.json` files contain information needed by the template compiler from a `.ts` file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains, for example, the content of annotations (such as a component's template) which TypeScript emits to the `.js` file but not to the `.d.ts` file. +`.metadata.json` 文件中包含模板编译器所需的信息，这些信息来自于 `.ts` 文件中，但是没有包含在由 TypeScript 编译器生成的 `.d.ts` 文件中。 +比如，这个信息包括 TypeScript 发出的注解内容（如组件的模板），TypeScript 把它生成到了 `.js` 文件中，但是没有生成到 `.d.ts` 文件中。 + This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead. +如果使用了 TypeScript 的 `--outFile` 选项，那就要同时设置这个选项。因为在 TypeScript 的这种输出方式下，metadata 文件是无效的。 +Angular 中不建议使用 `--outFile`，请改用 [webpack](https://webpack.js.org/) 之类的打包器代替。 + This option can also be set to `true` when using factory summaries as the factory summaries include a copy of the information that is in the `.metadata.json` file. +当使用工厂汇总器（factory summary）时，这个选项也要设置为 `true`，因为工厂汇总器在自己的 `.metadata.json` 中也包含了这些信息的一个副本。 + ### *strictMetadataEmit* This option tells the template compiler to report an error to the `.metadata.json` file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`. +这个选项告诉模板编译器如果 `"skipMetadataEmit"` 为 `false`，那就把错误信息汇报到 `.metadata.json` 中。 +只有当 `"skipMetadataEmit"` 为 `false` 且 `"skipTemplateCodeGen"` 为 `true` 时才应该使用这个选项。 + It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol. +它的设计意图是要验证为打包 `npm` 而生成的 `.metadata.json` 文件。 +这种验证非常严格，因此在使用模板编译器时可能会对那些铁定不会出错的元数据文件报告一些错误。 +你可以用 `@dynamic` 在注释中指定一些符号，来禁止对它们报告错误。 + It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors if the metadata is used to determine the contents of an annotation. The metadata collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively @@ -310,8 +349,8 @@ Angular 的元数据会告诉 Angular 如何创建应用中类的实例以及如 You specify the metadata with **decorators** such as `@Component()` and `@Input()`. You also specify metadata implicitly in the constructor declarations of these decorated classes. -我们通过**装饰器**来指定元数据，比如 `@Component()` 和 `@Input()`。 -我们还可以在这些带装饰器的类的构造函数中隐式指定元数据。 +你通过**装饰器**来指定元数据，比如 `@Component()` 和 `@Input()`。 +你还可以在这些带装饰器的类的构造函数中隐式指定元数据。 In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`. @@ -330,7 +369,7 @@ export class TypicalComponent { ``` -The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`. +The Anglar compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`. When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency. Angular 编译器只提取**一次**元数据，并且为 `TypicalComponent` 生成一个**工厂**。 @@ -342,7 +381,7 @@ Angular 编译器只提取**一次**元数据，并且为 `TypicalComponent` 生 You write metadata in a _subset_ of TypeScript that must conform to the following general constraints: -我们只能使用 TypeScript 的一个**子集**书写元数据，它必须满足下列限制： +你只能使用 TypeScript 的一个**子集**书写元数据，它必须满足下列限制： 1. Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript. @@ -362,7 +401,7 @@ You write metadata in a _subset_ of TypeScript that must conform to the followin The next sections elaborate on these points. -我们将在下一节详细解释这些问题。 +下一节将会详细解释这些问题。 ## How AOT works @@ -370,7 +409,7 @@ The next sections elaborate on these points. It helps to think of the AOT compiler as having two phases: a code analysis phase in which it simply records a representation of the source; and a code generation phase in which the compiler's `StaticReflector` handles the interpretation as well as places restrictions on what it interprets. -我们可以把 AOT 编译器看做两个阶段：在代码分析阶段，它只记录源代码，而在代码生成阶段，编译器的 `StaticReflector` 会解释这些结果，并为这些结果加上限制。 +可以把 AOT 编译器看做两个阶段：在代码分析阶段，它只记录源代码，而在代码生成阶段，编译器的 `StaticReflector` 会解释这些结果，并为这些结果加上限制。 ## Phase 1: analysis @@ -386,7 +425,7 @@ At the same time, the AOT **_collector_** analyzes the metadata recorded in the You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree). -我们可以把 `.metadata.json` 文件看做一个包括全部装饰器的元数据的全景图，就像[抽象语法树 (AST) ](https://en.wikipedia.org/wiki/Abstract_syntax_tree)一样。 +你可以把 `.metadata.json` 文件看做一个包括全部装饰器的元数据的全景图，就像[抽象语法树 (AST) ](https://en.wikipedia.org/wiki/Abstract_syntax_tree)一样。
@@ -407,25 +446,25 @@ Define metadata objects with the following limited syntax: 这个**收集器**只能理解 JavaScript 的一个子集。 请使用下列受限语法定义元数据对象： -Syntax | Example ------------------------------------|----------------------------------- -Literal object | `{cherry: true, apple: true, mincemeat: false}` -Literal array | `['cherries', 'flour', 'sugar']` -Spread in literal array | `['apples', 'flour', ...the_rest]` -Calls | `bake(ingredients)` -New | `new Oven()` -Property access | `pie.slice` -Array index | `ingredients[0]` -Identifier reference | `Component` -A template string | `pie is ${multiplier} times better than cake` -Literal string | `'pi'` -Literal number | `3.14153265` -Literal boolean | `true` -Literal null | `null` -Supported prefix operator | `!cake` -Supported Binary operator | `a + b` -Conditional operator | `a ? b : c` -Parentheses | `(a + b)` +Syntax语法 | Example范例 +----------------------------------- |----------------------------------- +Literal object对象字面量 | `{cherry: true, apple: true, mincemeat: false}` +Literal array数组字面量 | `['cherries', 'flour', 'sugar']` +Spread in literal array字面量数组展开 | `['apples', 'flour', ...the_rest]` +Calls调用 | `bake(ingredients)` +New创建对象 | `new Oven()` +Property access属性访问 | `pie.slice` +Array index数组索引 | `ingredients[0]` +Identifier reference标识符引用 | `Component` +A template string模板字符串 | `pie is ${multiplier} times better than cake` +Literal string字符串字面量 | `'pi'` +Literal number数字字面量 | `3.14153265` +Literal boolean逻辑字面量 | `true` +Literal null空字面量 | `null` +Supported prefix operator受支持的前缀操作符 | `!cake` +Supported Binary operator受支持的二元操作符 | `a + b` +Conditional operator条件操作符 | `a ? b : c` +Parentheses括号 | `(a + b)` If an expression uses unsupported syntax, the _collector_ writes an error node to the `.metadata.json` file. The compiler later reports the error if it needs that piece of metadata to generate the application code. diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 315ba82cbf..2e192058ae 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -15,7 +15,7 @@ You write Angular applications by composing HTML *templates* with Angularized ma writing *component* classes to manage those templates, adding application logic in *services*, and boxing components and services in *modules*. -我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML *模板*， +你是这样编写 Angular 应用的：用 Angular 扩展语法编写 HTML *模板*， 用*组件*类管理这些模板，用*服务*添加应用逻辑， 用*模块*打包发布组件与服务。 @@ -23,13 +23,13 @@ Then you launch the app by *bootstrapping* the _root module_. Angular takes over, presenting your application content in a browser and responding to user interactions according to the instructions you've provided. -然后，我们通过*引导*_根模块_来启动该应用。 +然后，你通过*引导**根模块*来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。 Of course, there is more to it than this. You'll learn the details in the pages that follow. For now, focus on the big picture. -当然，这只是冰山一角。后面我们将学习更多的细节。不过，目前我们还是先关注全景图吧。 +当然，这只是冰山一角。后面你还会学到更多的细节。不过，目前还是先关注全景图吧。
overview @@ -135,7 +135,7 @@ Here's a simple root module: Launch an application by _bootstrapping_ its root module. During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one. -我们通过_引导_根模块来启动应用。 +通过*引导*根模块来启动应用。 在开发期间，你通常在一个 `main.ts` 文件中引导 `AppModule`，就像这样： @@ -176,7 +176,7 @@ JavaScript 中，每个_文件_是一个模块，文件中定义的所有对象 These are two different and _complementary_ module systems. Use them both to write your apps. -这两个模块化系统是互补的，我们在写程序时都会用到。 +这两个模块化系统是不同但*互补*的，我们在写程序时都会用到。 ### Angular libraries @@ -243,7 +243,7 @@ Hang in there. The confusion yields to clarity with time and experience. A _component_ controls a patch of screen called a *view*. -_组件_负责控制屏幕上的一小块区域，我们称之为*视图*。 +_组件_负责控制屏幕上的一小块区域叫做*视图*。 For example, the following views are controlled by components: @@ -264,7 +264,7 @@ For example, the following views are controlled by components: You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods. -我们在类中定义组件的应用逻辑，为视图提供支持。 +你在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。 {@a component-code} @@ -295,7 +295,7 @@ Your app can take action at each moment in this lifecycle through optional [life You define a component's view with its companion **template**. A template is a form of HTML that tells Angular how to render the component. -我们通过组件的自带的**模板**来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。 +你通过组件的自带的**模板**来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。 A template looks like regular HTML, except for a few differences. Here is a template for our `HeroListComponent`: @@ -351,7 +351,7 @@ There is no evidence of a framework, no "Angular" in it at all. In fact, `HeroListComponent` really is *just a class*. It's not a component until you *tell Angular about it*. -实际上，`HeroListComponent` 真的*只是一个类*。直到我们*告诉 Angular* 它是一个组件。 +实际上，`HeroListComponent` 真的*只是一个类*。直到你*告诉 Angular* 它是一个组件。 To tell Angular that `HeroListComponent` is a component, attach **metadata** to the class. @@ -360,7 +360,7 @@ To tell Angular that `HeroListComponent` is a component, attach **metadata** to In TypeScript, you attach metadata by using a **decorator**. Here's some metadata for `HeroListComponent`: -在 TypeScript 中，我们用**装饰器 (decorator) **来附加元数据。 +在 TypeScript 中，你要用**装饰器 (decorator) **来附加元数据。 下面就是 `HeroListComponent` 的一些元数据。 @@ -431,7 +431,7 @@ Without a framework, you would be responsible for pushing data values into the H into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to read as any experienced jQuery programmer can attest. -如果没有框架，我们就得自己把数据值推送到 HTML 控件中，并把用户的反馈转换成动作和值更新。 +如果没有框架，你就得自己把数据值推送到 HTML 控件中，并把用户的反馈转换成动作和值更新。 如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过 jQuery 的程序员大概都对此深有体会。 Data Binding @@ -441,7 +441,7 @@ a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides. Angular 支持**数据绑定**，一种让模板的各部分与组件的各部分相互合作的机制。 -我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。 +往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。 As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions. @@ -529,7 +529,7 @@ a `@Component` decorator is actually a `@Directive` decorator extended with temp While **a component is technically a directive**, components are so distinctive and central to Angular applications that this architectural overview separates components from directives. - 虽然**严格来说组件就是一个指令**，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。 + 虽然**严格来说组件就是一个指令**，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中把组件从指令中独立了出来。
@@ -588,7 +588,7 @@ Angular 还有少量指令，它们或者修改结构布局（例如 [ngSwitch]( Of course, you can also write your own directives. Components such as `HeroListComponent` are one kind of custom directive. -当然，我们也能编写自己的指令。像 `HeroListComponent` 这样的组件就是一种自定义指令。 +当然，你也能编写自己的指令。像 `HeroListComponent` 这样的组件就是一种自定义指令。 @@ -682,13 +682,13 @@ It delegates everything nontrivial to services. Angular doesn't *enforce* these principles. It won't complain if you write a "kitchen sink" component with 3000 lines. -Angular 不会*强制要求*我们遵循这些原则。 -即使我们花 3000 行代码写了一个“厨房洗碗槽”组件，它也不会抱怨什么。 +Angular 不会*强行保障*这些原则。 +即使你花 3000 行代码写了一个“厨房洗碗槽”组件，它也不会抱怨什么。 Angular does help you *follow* these principles by making it easy to factor your application logic into services and make those services available to components through *dependency injection*. -Angular 帮助我们*遵循*这些原则 —— 它让我们能轻易地把应用逻辑拆分到服务，并通过*依赖注入*来在组件中使用这些服务。 +Angular 帮助你*遵循*这些原则 —— 它让我们能轻易地把应用逻辑拆分到服务，并通过*依赖注入*来在组件中使用这些服务。
@@ -747,12 +747,12 @@ If the injector doesn't have a `HeroService`, how does it know how to make one? In brief, you must have previously registered a **provider** of the `HeroService` with the injector. A provider is something that can create or return a service, typically the service class itself. -简单点说，我们必须先用注入器（injector）为 `HeroService` 注册一个**提供商（provider）**。 +简单点说，你必须先用注入器（injector）为 `HeroService` 注册一个**提供商（provider）**。 提供商用来创建或返回服务，通常就是这个服务类本身（相当于 `new HeroService()`）。 You can register providers in modules or in components. -我们可以在模块中或组件中注册提供商。 +你可以在模块中或组件中注册提供商。 In general, add providers to the [root module](guide/architecture#modules) so that the same instance of a service is available everywhere. @@ -814,7 +814,7 @@ Points to remember about dependency injection: You've learned the basics about the eight main building blocks of an Angular application: -我们学到的这些只是关于 Angular 应用程序的八个主要构造块的基础知识： +你学到的这些只是关于 Angular 应用程序的八个主要构造块的基础知识： * [Modules](guide/architecture#modules) @@ -853,7 +853,7 @@ and it's more than enough to get going. But it doesn't include everything you need to know. 这是 Angular 应用程序中所有其它东西的基础，要使用 Angular，以这些作为开端就绰绰有余了。 -但它仍然没有包含我们需要知道的全部。 +但它仍然没有包含你需要知道的一切。 Here is a brief, alphabetical list of other important Angular features and services. Most of them are covered in this documentation (or soon will be). diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index d98d95beed..d24f63c121 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -169,7 +169,7 @@ You use the `ElementRef`in the directive's constructor to [inject](guide/dependency-injection) a reference to the host DOM element, the element to which you applied `appHighlight`. -我们可以在指令的构造函数中注入 `ElementRef`，来引用宿主 DOM 元素， +你可以在指令的构造函数中注入 `ElementRef`，来引用宿主 DOM 元素， `ElementRef` grants direct access to the host DOM element through its `nativeElement` property. @@ -188,7 +188,7 @@ This first implementation sets the background color of the host element to yello To use the new `HighlightDirective`, add a paragraph (`

`) element to the template of the root `AppComponent` and apply the directive as an attribute. -运行应用，就会看到我们的指令确实高亮了段落中的文本。 +要想使用这个新的 `HighlightDirective`，就往根组件 `AppComponent` 的模板中添加一个 `

` 元素，并把该指令作为一个属性使用。 @@ -209,7 +209,7 @@ which sets the `

` element's background style to yellow. 总结：Angular 在**宿主**元素 `

` 上发现了一个 `appHighlight` 属性。 然后它创建了一个 `HighlightDirective` 类的实例，并把所在元素的引用注入到了指令的构造函数中。 -在构造函数中，我们把 `

` 元素的背景设置为了黄色。 +在构造函数中，该指令把 `

` 元素的背景设置为了黄色。 {@a respond-to-user} @@ -227,7 +227,7 @@ and respond by setting or clearing the highlight color. Begin by adding `HostListener` to the list of imported symbols. -先把 `HostListener` 加进导入列表中，同时再添加 `Input` 符号，因为我们很快就要用到它。 +先把 `HostListener` 加进导入列表中。 @@ -302,11 +302,11 @@ Currently the highlight color is hard-coded _within_ the directive. That's infle In this section, you give the developer the power to set the highlight color while applying the directive. 高亮的颜色目前是硬编码在指令中的，这不够灵活。 -我们应该让指令的使用者可以指定要用哪种颜色进行高亮。 +在这一节中，你应该让指令的使用者可以指定要用哪种颜色进行高亮。 Begin by adding `Input` to the list of symbols imported from `@angular/core`. -我们先从 `@angular/core` 中导入 `Input`。 +先从 `@angular/core` 中导入 `Input`。 @@ -352,7 +352,7 @@ 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. -很不错，但还可以更好。我们可以在应用该指令时在同一个属性中设置颜色，就像这样： +很不错，但如果可以在应用该指令时在*同一个属性*中设置颜色就更好了，就像这样： @@ -362,12 +362,12 @@ You're re-using the directive's attribute selector (`[appHighlight]`) to do both That's a crisp, compact syntax. `[appHighlight]` 属性同时做了两件事：把这个高亮指令应用到了 `

` 元素上，并且通过属性绑定设置了该指令的高亮颜色。 -我们复用了该指令的属性选择器 `[appHighlight]` 来同时完成它们。 +你复用了该指令的属性选择器 `[appHighlight]` 来同时完成它们。 这是清爽、简约的语法。 You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name. -我们还要把该指令的 `highlightColor` 改名为 `myHighlight`，因为它是颜色属性目前的绑定名。 +你还要把该指令的 `highlightColor` 改名为 `myHighlight`，因为它是颜色属性目前的绑定名。 @@ -383,7 +383,7 @@ This is disagreeable. The word, `appHighlight`, is a terrible property name and Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes. -幸运的是，我们可以随意命名该指令的属性，并且**给它指定一个用于绑定的别名**。 +幸运的是，你可以随意命名该指令的属性，并且**给它指定一个用于绑定的别名**。 Restore the original property name and specify the selector as the alias in the argument to `@Input`. @@ -394,7 +394,7 @@ Restore the original property name and specify the selector as the alias in the _Inside_ the directive the property is known as `highlightColor`. _Outside_ the directive, where you bind to it, it's known as `appHighlight`. -在指令内部，该属性叫 `highlightColor`，在外部，当我们绑定到它时，它叫 `appHighlight`。 +在指令内部，该属性叫 `highlightColor`，在外部，你绑定到它地方，它叫 `appHighlight`。 You get the best of both worlds: the property name you want and the binding syntax you want: @@ -405,7 +405,7 @@ You get the best of both worlds: the property name you want and the binding synt Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property. If someone neglects to bind to `appHighlightColor`, highlight the host element in red: -现在，我们绑定到了 `highlightColor` 属性，并修改 `onMouseEnter()` 方法来使用它。 +现在，你通过别名绑定到了 `highlightColor` 属性，并修改 `onMouseEnter()` 方法来使用它。 如果有人忘了绑定到 `appHighlightColor`，那就用红色进行高亮。 @@ -425,7 +425,7 @@ In this section, you'll turn `AppComponent` into a harness that lets you pick the highlight color with a radio button and bind your color choice to the directive. 凭空想象该指令如何工作可不容易。 -在本节，我们将把 `AppComponent` 改成一个测试程序，它让你可以通过单选按钮来选取高亮颜色，并且把你选取的颜色绑定到指令中。 +在本节，你将把 `AppComponent` 改成一个测试程序，它让你可以通过单选按钮来选取高亮颜色，并且把你选取的颜色绑定到指令中。 Update app.component.html as follows: @@ -461,7 +461,7 @@ At the moment, the default color—the color that prevails until the user picks a highlight color—is hard-coded as "red". Let the template developer set the default color. -目前，默认颜色（它在用户选取了高亮颜色之前一直有效）被硬编码为红色。我们要让模板的开发者也可以设置默认颜色。 +目前，默认颜色（它在用户选取了高亮颜色之前一直有效）被硬编码为红色。应该允许模板的开发者设置默认颜色。 Add a second **input** property to `HighlightDirective` called `defaultColor`: @@ -492,7 +492,7 @@ and fall back to "violet" as the default color. Angular knows that the `defaultColor` binding belongs to the `HighlightDirective` because you made it _public_ with the `@Input` decorator. -Angular 之所以知道 `defaultColor` 绑定属于 `HighlightDirective`，是因为我们已经通过 `@Input` 装饰器把它设置成了*公共*属性。 +Angular 之所以知道 `defaultColor` 绑定属于 `HighlightDirective`，是因为你已经通过 `@Input` 装饰器把它设置成了*公共*属性。 Here's how the harness should work when you're done coding. @@ -554,7 +554,7 @@ You can also experience and download the @@ -574,7 +574,7 @@ Without `@Input`, Angular refuses to bind to the property. You've bound template HTML to component properties before and never used `@Input`. What's different? -但我们以前也曾经把模板 HTML 绑定到组件的属性，而且从来没有用过 `@Input`。 +但你以前也曾经把模板 HTML 绑定到组件的属性，而且从来没有用过 `@Input`。 差异何在？ The difference is a matter of trust. diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index 762f28020b..5711353015 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -194,7 +194,7 @@ Angular 构建于 Web 平台的最新标准之上。 You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support. The [table below](#polyfill-libs) identifies most of the polyfills you might need. -我们可以通过加载腻子脚本("polyfills")来为想要支持的浏览器弥补这些特性。 +你可以通过加载腻子脚本("polyfills")来为想要支持的浏览器弥补这些特性。 [下表](#polyfill-libs) 列出了可能用到的大多数腻子脚本。

@@ -224,7 +224,7 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these. -**强制性** 腻子脚本（如 `zone.js`）的 npm 包在创建项目时就已经自动安装了，相应的 `import` 语句也都加好了。我们一般不用动它们。 +**强制性** 腻子脚本（如 `zone.js`）的 npm 包在创建项目时就已经自动安装了，相应的 `import` 语句也都加好了。你一般不用动它们。 But if you need an optional polyfill, you'll have to install its npm package. For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent): diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md index 59b7881d73..163cbe5576 100644 --- a/aio/content/guide/change-log.md +++ b/aio/content/guide/change-log.md @@ -5,7 +5,7 @@ The Angular documentation is a living document with continuous improvements. This log calls attention to recent significant changes. -我们将持续不断的更新和改进 Angular 文档。本日志记录了近期最重要的变更。 +Angular 的文档将持续不断的更新和改进。本日志记录了近期最重要的变更。 ## Updated to Angular 4.0. Documentation for Angular 2.x can be found at [v2.angular.io](https://v2.angular.io). @@ -61,7 +61,7 @@ It helps clearly separate app code from setup and configuration files. 所有的文档范例都已经向 Angular CLI 的默认文件夹结构看齐了。 这是把范例迁移到 Angular CLI 过程中的一步。 -不过也不仅是为了迁移，它确实能帮我们把应用代码从环境代码和配置代码中分离出来。 +不过也不仅是为了迁移，它还能把应用代码从环境准备代码和配置代码中清晰地分离出来。 All samples now have a `src/` folder at the project root. The former `app/` folder moves under `src/`. @@ -69,7 +69,7 @@ Read about moving your existing project to this structure in the QuickStart repo update instructions. -我们已经把所有范例改成了使用项目根目录下的 `src/` 文件夹。 +所有的范例都改成了使用项目根目录下的 `src/` 文件夹。 也就是把以前的 `app/` 文件夹移到了 `src/` 文件夹下面。 要了解如何对你的现有项目进行这种迁移，请参阅QuickStart 中的迁移指南。 @@ -403,10 +403,10 @@ Barrels now are far less useful and have been removed from the style guide; they remain valuable but are not a matter of Angular style. Also relaxed the rule that discouraged use of the `@Component.host` property. -[StyleGuide](guide/styleguide)解释了我们为 Angular 模块（NgModule）而推荐的约定。 +[StyleGuide](guide/styleguide)解释了 Angular 模块（NgModule）推荐的约定。 现在，封装桶不再那么重要，风格指南已经移除了它们。 它们仍然很有价值，但是它们与 Angular 风格无关。 -我们同时对**不推荐使用 `@Component.host` 属性**的规则有所放宽。 +同时，**不推荐使用 `@Component.host` 属性**的规则也有所放宽。 ## _moduleId: module.id_ everywhere (2016-09-25) @@ -417,7 +417,7 @@ have been converted to _module-relative_ URLs. Added the `moduleId: module.id` property-and-value to their `@Component` metadata. 在所有使用 `templateUrl` 或者 `styleUrls` 来获取模板或样式的例子组件都被转换为**相对模块**的 URL。 -我们添加了 `moduleId: module.id` 到它们的 `@Component` 元数据。 +把 `moduleId: module.id` 添加到了它们的 `@Component` 元数据。 This change is a requirement for compilation with AOT compiler when the app loads modules with SystemJS as the samples currently do. diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md index 1786315f71..b6c43cfa68 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -291,7 +291,7 @@ countdown status message in its own template. The `CountdownLocalVarParentComponent` that hosts the timer component is as follows: -让我们来看看计时器组件的宿主组件 `CountdownLocalVarParentComponent`。 +计时器组件的宿主组件 `CountdownLocalVarParentComponent` 如下： @@ -311,7 +311,7 @@ That gives you a reference to the child component and the ability to access This example wires parent buttons to the child's `start` and `stop` and uses interpolation to display the child's `seconds` property. -在这个例子中，我们把父组件的按钮绑定到子组件的 `start` 和 `stop` 方法，并用插值表达式来显示子组件的 `seconds` 属性。 +这个例子把父组件的按钮绑定到子组件的 `start` 和 `stop` 方法，并用插值表达式来显示子组件的 `seconds` 属性。 Here we see the parent and child working together. @@ -369,7 +369,7 @@ Neither its appearance nor its behavior will change. The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-example) is the same as well. 下面的例子用与[倒计时](guide/component-interaction#countdown-timer-example)相同的范例来解释这种技术。 -我们没有改变它的外观或行为。子组件[CountdownTimerComponent](guide/component-interaction#countdown-timer-example)也和原来一样。 +它的外观或行为没有变化。子组件[CountdownTimerComponent](guide/component-interaction#countdown-timer-example)也和原来一样。
@@ -415,14 +415,14 @@ The `ngAfterViewInit()` lifecycle hook is an important wrinkle. The timer component isn't available until *after* Angular displays the parent view. So it displays `0` seconds initially. -`ngAfterViewInit()` 生命周期钩子是非常重要的一步。被注入的计时器组件只有在 Angular 显示了父组件视图之后才能访问，所以我们先把秒数显示为 0. +`ngAfterViewInit()` 生命周期钩子是非常重要的一步。被注入的计时器组件只有在 Angular 显示了父组件视图之后才能访问，所以它先把秒数显示为 0. Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late* to update the parent view's display of the countdown seconds. Angular's unidirectional data flow rule prevents updating the parent view's in the same cycle. The app has to *wait one turn* before it can display the seconds. -然后 Angular 会调用 `ngAfterViewInit` 生命周期钩子，但这时候再更新父组件视图的倒计时就已经太晚了。Angular 的单向数据流规则会阻止在同一个周期内更新父组件视图。我们在显示秒数之前会被迫*再等一轮*。 +然后 Angular 会调用 `ngAfterViewInit` 生命周期钩子，但这时候再更新父组件视图的倒计时就已经太晚了。Angular 的单向数据流规则会阻止在同一个周期内更新父组件视图。应用在显示秒数之前会被迫*再等一轮*。 Use `setTimeout()` to wait one tick and then revise the `seconds()` method so that it takes future values from the timer component. diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index 604b20b605..b08a7089e3 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -6,21 +6,21 @@ Angular applications are styled with standard CSS. That means you can apply everything you know about CSS stylesheets, selectors, rules, and media queries directly to Angular applications. -Angular 应用使用标准的 CSS 来设置样式。这意味着我们可以把关于 CSS -的那些知识和技能直接用于我们的 Angular 程序中，例如：样式表、选择器、规则以及媒体查询等。 +Angular 应用使用标准的 CSS 来设置样式。这意味着你可以把关于 CSS +的那些知识和技能直接用于 Angular 程序中，例如：样式表、选择器、规则以及媒体查询等。 Additionally, Angular can bundle *component styles* with components, enabling a more modular design than regular stylesheets. -另外，Angular 还能把*组件样式*捆绑在我们的组件上，以实现比标准样式表更加模块化的设计。 +另外，Angular 还能把*组件样式*捆绑在组件上，以实现比标准样式表更加模块化的设计。 This page describes how to load and apply these component styles. -在本章中，我们将学到如何加载和使用这些*组件样式*。 +本章将会讲解如何加载和使用这些*组件样式*。 You can run the in Stackblitz and download the code from there. -运行来试用本页的代码。 +你可以运行来在 Stackblitz 中试用并下载本页的代码。 ## Using component styles @@ -30,7 +30,7 @@ For every Angular component you write, you may define not only an HTML template, but also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need. -对于我们写的每个 Angular 组件来说，除了定义 HTML 模板之外，我们还要定义用于模板的 CSS 样式、 +对你编写的每个 Angular 组件来说，除了定义 HTML 模板之外，我们还要定义用于模板的 CSS 样式、 指定任意的选择器、规则和媒体查询。 One way to do this is to set the `styles` property in the component metadata. @@ -39,7 +39,7 @@ Usually you give it one string, as in the following example: 实现方式之一，是在组件的元数据中设置 `styles` 属性。 `styles` 属性可以接受一个包含 CSS 代码的字符串数组。 -通常我们只给它一个字符串就行了，如同下例： +通常你只给它一个字符串就行了，如同下例： @@ -81,17 +81,17 @@ This scoping restriction is a ***styling modularity feature***. * Changes to styles elsewhere in the application don't affect the component's styles. - 我们组件的样式*不会*因为别的地方修改了样式而被意外改变。 + 组件的样式*不会*因为别的地方修改了样式而被意外改变。 * You can co-locate the CSS code of each component with the TypeScript and HTML code of the component, which leads to a neat and tidy project structure. - 我们可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起，这将促成清爽整洁的项目结构。 + 你可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起，这将促成清爽整洁的项目结构。 * You can change or remove component CSS code without searching through the whole application to find where else the code is used. - 将来我们可以修改或移除组件的 CSS 代码，而不用遍历整个应用来看它有没有被别处用到，只要看看当前组件就可以了。 + 将来你可以修改或移除组件的 CSS 代码，而不用遍历整个应用来看它有没有被别处用到，只要看看当前组件就可以了。 {@a special-selectors} @@ -123,7 +123,7 @@ The `:host` selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template. -这是我们能以宿主元素为目标的*唯一*方式。除此之外，我们将没办法指定它， +`:host` 选择是是把宿主元素作为目标的*唯一*方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。 Use the *function form* to apply host styles conditionally by @@ -133,7 +133,7 @@ including another selector inside parentheses after `:host`. The next example targets the host element again, but only when it also has the `active` CSS class. -在下一个例子中，我们又一次把宿主元素作为目标，但是只有当它同时带有 `active` CSS 类的时候才会生效。 +下一个例子再次把宿主元素作为目标，但是只有当它同时带有 `active` CSS 类的时候才会生效。 @@ -148,7 +148,7 @@ For example, a CSS theme class could be applied to the document `` element you want to change how your component looks based on that. 有时候，基于某些来自组件视图*外部*的条件应用样式是很有用的。 -例如，在文档的 `` 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，而我们应当基于它来决定组件的样式。 +例如，在文档的 `` 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，你应当基于它来决定组件的样式。 Use the `:host-context()` pseudo-class selector, which works just like the function form of `:host()`. The `:host-context()` selector looks for a CSS class in any ancestor of the component host element, @@ -160,7 +160,7 @@ up to the document root. The `:host-context()` selector is useful when combined The following example applies a `background-color` style to all `

` elements *inside* the component, only if some ancestor element has the CSS class `theme-light`. -在下面的例子中，只有当某个祖先元素有 CSS 类 `theme-light` 时，我们才会把 `background-color` 样式应用到组件*内部*的所有 `

` 元素中。 +在下面的例子中，只有当某个祖先元素有 CSS 类 `theme-light` 时，才会把 `background-color` 样式应用到组件*内部*的所有 `

` 元素中。 @@ -179,12 +179,12 @@ component tree into all the child component views. The `/deep/` combinator works to any depth of nested components, and it applies to both the view children and content children of the component. -我们可以使用 `/deep/` 选择器，来强制一个样式对各级子组件的视图也生效，它*不但作用于组件的子视图，也会作用于组件的内容*。 +可以使用 `/deep/` 选择器来强制一个样式对各级子组件的视图也生效，它*不但作用于组件的子视图，也会作用于组件的内容*。 The following example targets all `

` elements, from the host element down through this component to all of its child elements in the DOM. -在这个例子中，我们以所有的 `

` 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素： +这个例子以所有的 `

` 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素： @@ -250,7 +250,7 @@ The scoping rules outlined earlier apply to each of these loading patterns. You can add a `styles` array property to the `@Component` decorator. -我们可以给 `@Component` 装饰器添加一个 `styles` 数组型属性。 +你可以给 `@Component` 装饰器添加一个 `styles` 数组型属性。 Each string in the array defines some CSS for this component. @@ -287,7 +287,7 @@ ng generate component hero-app --inline-style You can load styles from external CSS files by adding a `styleUrls` property to a component's `@Component` decorator: -我们可以通过把外部 CSS 文件添加到 `@Component` 的 `styleUrls` 属性中来加载外部样式。 +你可以通过把外部 CSS 文件添加到 `@Component` 的 `styleUrls` 属性中来加载外部样式。 @@ -310,7 +310,7 @@ They are _not inherited_ by any components nested within the template nor by any You can specify more than one styles file or even a combination of `style` and `styleUrls`. - 我们可以指定多个样式文件，甚至可以组合使用 `style` 和 `styleUrls` 方式。 + 你可以指定多个样式文件，甚至可以组合使用 `style` 和 `styleUrls` 方式。

@@ -331,7 +331,7 @@ ng generate component hero-app You can embed CSS styles directly into the HTML template by putting them inside `