From 0c420c2efc6435e82afd55bce14b469439cb886b Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Mon, 12 Mar 2018 13:04:24 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BA=A0=E6=AD=A3=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E5=8F=8A=E7=BF=BB=E8=AF=91=E9=81=97=E6=BC=8F=E7=9A=84=E9=83=A8?= =?UTF-8?q?=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/content/guide/attribute-directives.md | 18 +++-- aio/content/guide/component-interaction.md | 2 +- aio/content/guide/component-styles.md | 26 +++++++ aio/content/guide/dynamic-component-loader.md | 3 +- aio/content/guide/router.md | 12 +-- aio/content/guide/template-syntax.md | 78 +++++++++++++++---- aio/content/translations/cn/about.md | 6 ++ aio/content/tutorial/toh-pt6.md | 2 +- 8 files changed, 117 insertions(+), 30 deletions(-) diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md index 8e63d004b9..02578e33af 100644 --- a/aio/content/guide/attribute-directives.md +++ b/aio/content/guide/attribute-directives.md @@ -8,7 +8,7 @@ An **Attribute** directive changes the appearance or behavior of a DOM element. Try the . -你可以到这里试试：。 +你可以到这里试试：。 {@a directive-overview} @@ -174,8 +174,12 @@ the element to which you applied `appHighlight`. `ElementRef` grants direct access to the host DOM element through its `nativeElement` property. +`ElementRef` 通过其 `nativeElement` 属性给你了直接访问宿主 DOM 元素的能力。 + This first implementation sets the background color of the host element to yellow. +这里的第一个实现把宿主元素的背景色设置为了黄色。 + {@a apply-directive} ## Apply the attribute directive @@ -263,10 +267,13 @@ There are at least three problems with _that_ approach: The handlers delegate to a helper method that sets the color on the host DOM element, `el`. +这些处理器委托了一个辅助方法来为DOM元素（`el`）设置颜色。 + The helper method, `highlight`, was extracted from the constructor. The revised constructor simply declares the injected `el: ElementRef`. -这些处理器委托给了一个辅助方法，它用于为DOM元素设置颜色，`el`就是你在构造器中声明和初始化过的。 +这个辅助方法（`highlight`）被从构造函数中提取了出来。 +修改后的构造函数只负责声明要注入的元素 `el: ElementRef`。 @@ -289,7 +296,7 @@ the mouse hovers over the `p` and disappears as it moves out. ## Pass values into the directive with an _@Input_ data binding -## 使用数据绑定向指令传递值 +## 使用 `@Input` 数据绑定向指令传递值 Currently the highlight color is hard-coded _within_ the directive. That's inflexible. In this section, you give the developer the power to set the highlight color while applying the directive. @@ -617,13 +624,12 @@ Now apply that reasoning to the following example: The template and its component trust each other. The `color` property doesn't require the `@Input` decorator. - `color`属性位于右侧的绑定表达式中，它属于模板所在的组件。 + `color`属性位于右侧的绑定表达式中，它属于模板所在的组件。 该模板和组件相互信任。因此`color`不需要`@Input`装饰器。 * The `appHighlight` property on the left refers to an _aliased_ property of the `HighlightDirective`, not a property of the template's component. There are trust issues. Therefore, the directive property must carry the `@Input` decorator. - - `appHighlight`属性位于左侧，它引用了`HighlightDirective`中一个*带别名的*属性，它不是模板所属组件的一部分，因此存在信任问题。 + `appHighlight`属性位于左侧，它引用了`HighlightDirective`中一个*带别名的*属性，它不是模板所属组件的一部分，因此存在信任问题。 所以，该属性必须带`@Input`装饰器。 diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md index d20bd329cf..5102fc8ea6 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -41,7 +41,7 @@ in which two or more components share information. **See the **. -**参见**。 +**参见**。 {@a parent-to-child} diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index c9dad49002..1431361269 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -316,6 +316,8 @@ They are _not inherited_ by any components nested within the template nor by any The CLI creates an empty styles file for you by default and references that file in the component's generated `styleUrls`. +CLI 会默认为你创建一个空白的样式表文件，并且在所生成组件的 `styleUrls` 中引用该文件。 + ng generate component hero-app @@ -352,8 +354,12 @@ You can also write `` tags into the component's HTML template. The link tag's `href` URL must be relative to the _**application root**_, not relative to the component file. +link 标签的 `href` URL 必须是相对于***本应用的根路径***的，而不是相对于这个组件文件的。 + When building with the CLI, be sure to include the linked style file among the assets to be copied to the server as described in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-asset-configuration). +当使用 CLI 进行构建时，要确保这个链接到的样式表文件被复制到了服务器上。参见 [CLI 官方文档](https://github.com/angular/angular-cli/wiki/stories-asset-configuration)。 + ### CSS @imports @@ -377,17 +383,29 @@ In this case, the URL is relative to the CSS file into which you're importing. ### External and global style files +### 外部以及全局样式文件 + When building with the CLI, you must configure the `.angular-cli.json` to include _all external assets_, including external style files. +当使用 CLI 进行构建时，你必须配置 `.angular-cli.json` 文件，使其包含*所有外部资源*（包括外部的样式表文件）。 + Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file. +在它的 `styles` 区注册这些**全局**样式文件，默认情况下，它会有一个预先配置的全局 `styles.css` 文件。 + See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-global-styles) to learn more. +要了解更多，参见 [CLI 官方文档](https://github.com/angular/angular-cli/wiki/stories-global-styles)。 + ### Non-CSS style files +### 非 CSS 样式文件 + If you're building with the CLI, you can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example: +如果使用 CLI 进行构建，那么你可以用 [sass](http://sass-lang.com/)、[less](http://lesscss.org/) 或 [stylus](http://stylus-lang.com/) 来编写样式，并使用相应的扩展名（`.scss`、`.less`、`.styl`）把它们指定到 `@Component.styleUrls` 元数据中。例子如下： + @Component({ @@ -401,15 +419,23 @@ you can write style files in [sass](http://sass-lang.com/), [less](http://lesscs The CLI build process runs the pertinent CSS preprocessor. +CLI 的构建过程会运行相关的预处理器。 + When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default. You can configure the CLI to default to your preferred CSS preprocessor as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors "CSS Preprocessor integration"). +当使用 `ng generate component` 命令生成组件文件时，CLI 会默认生成一个空白的 CSS 样式文件（`.css`）。 +你可以配置 CLI，让它默认使用你喜欢的 CSS 预处理器，参见 [CLI 官方文档](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors + "CSS Preprocessor integration") 中的解释。 +
Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a preprocessor to inline styles. +添加到 `@Component.styles` 数组中的字符串*必须写成 CSS*，因为 CLI 没法对这些内联的样式使用任何 CSS 预处理器。 +
{@a view-encapsulation} diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index 3dae7788c1..a0baa6eb80 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -264,5 +264,4 @@ Here are two sample components and the `AdComponent` interface for reference: See the . - -参见。 +参见。 diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index bdde6b89ce..958ab4f910 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -2488,7 +2488,7 @@ So you flatten the `Observable` with the `switchMap` operator instead. The `switchMap` operator also cancels previous in-flight requests. If the user re-navigates to this route with a new `id` while the `HeroService` is still retrieving the old `id`, `switchMap` discards that old request and returns the hero for the new `id`. -`switchMap`操作符也会取消以前未完成的在途请求。如果用户使用心得`id`再次导航到该路由，而`HeroService`仍在接受老`id`对应的英雄，那么`switchMap`就会抛弃老的请求，并返回这个新`id`的英雄信息。 +`switchMap`操作符也会取消以前未完成的在途请求。如果用户使用新的`id`再次导航到该路由，而`HeroService`仍在接受老`id`对应的英雄，那么`switchMap`就会抛弃老的请求，并返回这个新`id`的英雄信息。 The observable `Subscription` will be handled by the `AsyncPipe` and the component's `hero` property will be (re)set with the retrieved hero. @@ -4432,14 +4432,14 @@ The same rule applies for feature modules loaded [asynchronously](#asynchronous- ### _CanActivateChild_: guarding child routes -### `CanAcitvateChild`：保护子路由 +### `CanActivateChild`：保护子路由 You can also protect child routes with the `CanActivateChild` guard. The `CanActivateChild` guard is similar to the `CanActivate` guard. The key difference is that it runs _before_ any child route is activated. 我们还可以使用`CanActivateChild`守卫来保护子路由。 -`CanActivateChild`守卫和`CanAcitvate`守卫很像。 +`CanActivateChild`守卫和`CanActivate`守卫很像。 它们的区别在于，`CanActivateChild`会在*任何子路由*被激活之前运行。 You protected the admin feature module from unauthorized access. @@ -4459,8 +4459,8 @@ The `canActivateChild()` method can return an `Observable` or `Promise< async checks and a `boolean` for sync checks. This one returns a `boolean`: -接下来，实现`CanAcitvateChild`方法，它所接收的参数与`CanAcitvate`方法一样：一个`ActivatedRouteSnapshot`和一个`RouterStateSnapshot`。 -`CanAcitvateChild`方法可以返回`Observable`或`Promise`来支持异步检查，或`boolean`来支持同步检查。 +接下来，实现`CanActivateChild`方法，它所接收的参数与`CanActivate`方法一样：一个`ActivatedRouteSnapshot`和一个`RouterStateSnapshot`。 +`CanActivateChild`方法可以返回`Observable`或`Promise`来支持异步检查，或`boolean`来支持同步检查。 这里返回的是`boolean`： @@ -5059,7 +5059,7 @@ You're already protecting the `AdminModule` with a `CanActivate` guard that prev accessing the admin feature area. It redirects to the login page if the user is not authorized. -我们已经使用`CanAcitvate`保护`AdminModule`了，它会阻止未授权用户访问管理特性区。如果用户未登录，它就会跳转到登录页。 +我们已经使用`CanActivate`保护`AdminModule`了，它会阻止未授权用户访问管理特性区。如果用户未登录，它就会跳转到登录页。 But the router is still loading the `AdminModule` even if the user can't visit any of its components. Ideally, you'd only load the `AdminModule` if the user is logged in. diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index ac2f5c5486..6d3dc296cb 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -788,38 +788,38 @@ For example, when the browser renders ``, it crea corresponding DOM node with a `value` property *initialized* to "Bob". 例如，当浏览器渲染``时，它将创建相应 DOM 节点， -其`value` property 被*初始化为* “Bob”。 +它的 `value` 这个 property 被*初始化为* “Bob”。 When the user enters "Sally" into the input box, the DOM element `value` *property* becomes "Sally". But the HTML `value` *attribute* remains unchanged as you discover if you ask the input element about that attribute: `input.getAttribute('value')` returns "Bob". -当用户在输入框中输入 “Sally” 时，DOM 元素的`value` *property* 变成了 “Sally”。 -但是这个 HTML `value` *attribute* 保持不变。如果我们读取 input 元素的 attribute，就会发现确实没变： +当用户在输入框中输入 “Sally” 时，DOM 元素的 `value` 这个 *property* 变成了 “Sally”。 +但是该 HTML 的 `value` 这个 *attribute* 保持不变。如果我们读取 input 元素的 attribute，就会发现确实没变： `input.getAttribute('value') // 返回 "Bob"`。 The HTML attribute `value` specifies the *initial* value; the DOM `value` property is the *current* value. -HTML attribute `value`指定了*初始*值；DOM `value` property 是*当前*值。 +HTML 的 `value` 这个 attribute 指定了*初始*值；DOM 的 `value` 这个 property 是*当前*值。 The `disabled` attribute is another peculiar example. A button's `disabled` *property* is `false` by default so the button is enabled. When you add the `disabled` *attribute*, its presence alone initializes the button's `disabled` *property* to `true` so the button is disabled. -`disabled` attribute 是另一个古怪的例子。按钮的`disabled` *property* 是`false`，因为默认情况下按钮是可用的。 -当我们添加`disabled` *attribute* 时，只要它出现了按钮的`disabled` *property* 就初始化为`true`，于是按钮就被禁用了。 +`disabled` 这个 attribute 是另一种特例。按钮的`disabled` 这个 *property* 是`false`，因为默认情况下按钮是可用的。 +当我们添加`disabled` 这个 *attribute* 时，只要它出现了按钮的`disabled` 这个 *property* 就初始化为`true`，于是按钮就被禁用了。 Adding and removing the `disabled` *attribute* disables and enables the button. The value of the *attribute* is irrelevant, which is why you cannot enable a button by writing ``. -添加或删除`disabled` *attribute*会禁用或启用这个按钮。但 *attribute* 的值无关紧要，这就是我们为什么没法通过 +添加或删除`disabled` 这个 *attribute*会禁用或启用这个按钮。但 *attribute* 的值无关紧要，这就是我们为什么没法通过 ``这种写法来启用按钮。 Setting the button's `disabled` *property* (say, with an Angular binding) disables or enables the button. The value of the *property* matters. -设置按钮的`disabled` *property*（如，通过 Angular 绑定）可以禁用或启用这个按钮。 +设置按钮的`disabled` 这个 *property*（如，通过 Angular 绑定）可以禁用或启用这个按钮。 这就是 *property* 的价值。 **The HTML attribute and the DOM property are not the same thing, even when they have the same name.** @@ -1511,8 +1511,6 @@ Here's how the table renders: One-Two - 1-2列 - @@ -1523,16 +1521,12 @@ Here's how the table renders: Five - 五列 - Six - 六列 - @@ -2920,27 +2914,44 @@ The `iconUrl` and `onSave` are members of the `AppComponent` class. They are _not_ decorated with `@Input()` or `@Output`. Angular does not object. +`iconUrl` 和 `onSave` 是 `AppComponent` 类的成员。但它们并没有带 `@Input()` 或 `@Output()` 装饰器。 +Angular 不在乎。 + **You can always bind to a public property of a component in its own template.** It doesn't have to be an _Input_ or _Output_ property +**你总是可以在组件自己的模板中绑定到组件的公共属性，**而不用管它们是否输入（Input）属性或输出（Output）属性。 + A component's class and template are closely coupled. They are both parts of the same thing. Together they _are_ the component. Exchanges between a component class and its template are internal implementation details. +这是因为组件类和模板是紧耦合的，它们是同一个东西的两个部分，合起来构成组件。 +组件类及其模板之间的交互属于实现细节。 + ### Binding to a different component +### 绑定到其它组件 + You can also bind to a property of a _different_ component. In such bindings, the _other_ component's property is to the _left_ of the (`=`). +你也可以绑定到*其它*组件的属性。 +这种绑定形式下，*其它*组件的属性位于等号（`=`）的*左侧*。 + In the following example, the `AppComponent` template binds `AppComponent` class members to properties of the `HeroDetailComponent` whose selector is `'app-hero-detail'`. +下面的例子中，`AppComponent` 的模板把 `AppComponent` 类的成员绑定到了 `HeroDetailComponent`（选择器为`'app-hero-detail'`） 的属性上。 + The Angular compiler _may_ reject these bindings with errors like this one: +Angular 的编译器*可能*会对这些绑定报错，就像这样： + Uncaught Error: Template parse errors: @@ -2951,42 +2962,71 @@ Can't bind to 'hero' since it isn't a known property of 'app-hero-detail' You know that `HeroDetailComponent` has `hero` and `deleteRequest` properties. But the Angular compiler refuses to recognize them. +你自己知道 `HeroDetailComponent` 有两个属性 `hero` 和 `detectRequest`，但 Angular 编译器并不知道。 + **The Angular compiler won't bind to properties of a different component unless they are Input or Output properties**. +**Angular 编译器不会绑定到其它组件的属性上 —— 除非这些属性是输入或输出属性。** + There's a good reason for this rule. +这条规则是有充分理由的。 + It's OK for a component to bind to its _own_ properties. The component author is in complete control of those bindings. +组件绑定到它*自己*的属性当然没问题。 +该组件的作者对这些绑定有完全的控制权。 + But other components shouldn't have that kind of unrestricted access. You'd have a hard time supporting your component if anyone could bind to any of its properties. Outside components should only be able to bind to the component's public binding API. +但是，其它组件不应该进行这种毫无限制的访问。 +如果任何人都可以绑定到你的组件的任何属性上，那么这个组件就很难维护。 +所以，外部组件应该只能绑定到组件的公共（允许绑定） API 上。 + Angular asks you to be _explicit_ about that API. It's up to _you_ to decide which properties are available for binding by external components. +Angular 要求你*显式声明*那些 API。 +它让*你*可以自己决定哪些属性是可以被外部组件绑定的。 + #### TypeScript _public_ doesn't matter +#### TypeScript 的 `public` 是没用的 + You can't use the TypeScript _public_ and _private_ access modifiers to shape the component's public binding API. +你不能用 TypeScript 的 `public` 和 `private` 访问控制符来标明组件的公共 API。 +
All data bound properties must be TypeScript _public_ properties. Angular never binds to a TypeScript _private_ property. +所有数据绑定属性必须是 TypeScript 的公共属性，Angular 永远不会绑定到 TypeScript 中的私有属性。 +
Angular requires some other way to identify properties that _outside_ components are allowed to bind to. That _other way_ is the `@Input()` and `@Output()` decorators. +因此，Angular 需要一些其它方式来标记出那些允许被*外部*组件绑定到的属性。 +这种*其它方式*，就是 `@Input()` 和 `@Output()` 装饰器。 + ### Declaring Input and Output properties +### 声明输入与输出属性 + In the sample for this guide, the bindings to `HeroDetailComponent` do not fail because the data bound properties are annotated with `@Input()` and `@Output()` decorators. +在本章的例子中，绑定到 `HeroDetailComponent` 不会失败，这是因为这些要进行数据绑定的属性都带有 `@Input()` 和 `@Output()` 装饰器。 + @@ -3356,10 +3396,14 @@ You'll need this template operator when you turn on strict null checks. It's opt ## The `$any` type cast function (`$any( )`) +## 类型转换函数 `$any` （$any( <表达式> )） + Sometimes a binding expression will be reported as a type error and it is not possible or difficult to fully specify the type. To silence the error, you can use the `$any` cast function to cast the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any). +有时候，绑定表达式可能会报类型错误，并且它不能或很难指定类型。要消除这种报错，你可以使用 `$any` 转换函数来把表达式转换成 [`any` 类型](http://www.typescriptlang.org/docs/handbook/basic-types.html#any)。 + @@ -3368,15 +3412,21 @@ In this example, when the Angular compiler turns your template into TypeScript c it prevents TypeScript from reporting that `marker` is not a member of the `Hero` interface. +在这个例子中，当 Angular 编译器把模板转换成 TypeScript 代码时，`$any` 表达式可以防止 TypeScript 编译器报错说 `marker` 不是 `Hero` 接口的成员。 + The `$any` cast function can be used in conjunction with `this` to allow access to undeclared members of the component. +`$any` 转换函数可以和 `this` 联合使用，以便访问组件中未声明过的成员。 + The `$any` cast function can be used anywhere in a binding expression where a method call is valid. +`$any` 转换函数可以在绑定表达式中任何可以进行方法调用的地方使用。 + ## Summary ## 小结 diff --git a/aio/content/translations/cn/about.md b/aio/content/translations/cn/about.md index fc37d99e7c..d3b52d147c 100644 --- a/aio/content/translations/cn/about.md +++ b/aio/content/translations/cn/about.md @@ -86,6 +86,12 @@ Angular 和 Grails 开发高校[教务管理系统](http://www.github.com/jwgl) - OuYancey（来自Github） - GenweiWu（来自Github） - dxyqqs（来自Github） +- wkylin（来自Github） +- rthel（来自Github） +- nickChenyx（来自Github） +- HNUHell（来自Github） +- SkyStardust（来自Github） +- Eve（来自Github） - 另外还有一些做好事不留名的活雷锋 想让你的名字也出现在这里吗？请提供[反馈、纠错](https://github.com/angular/angular-cn/issues)。 diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md index 6c5e841cad..895b1a8586 100644 --- a/aio/content/tutorial/toh-pt6.md +++ b/aio/content/tutorial/toh-pt6.md @@ -88,7 +88,7 @@ If you're _coding along_ with this tutorial, stay here and add the *In-memory We Install the *In-memory Web API* package from _npm_ -从 `npm` 中安装这个*内存 Web API* 包 +从 `npm` 中安装这个*内存 Web API* 包（译注：请使用 0.5+ 的版本，不要使用 0.4-）