fix: 精修翻译
This commit is contained in:
parent
f50ff4ba43
commit
9ec21f77fd
@ -777,7 +777,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
||||
For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
|
||||
section of the [Template Syntax](guide/template-syntax) page.
|
||||
|
||||
要了解属性绑定的更多知识,参见[模板语法](guide/template-syntax)中的[属性绑定](guide/template-syntax#property-binding)部分。
|
||||
要了解关于属性绑定的更多知识,参见[模板语法](guide/template-syntax)中的[属性绑定](guide/template-syntax#property-binding)部分。
|
||||
|
||||
</td>
|
||||
|
||||
@ -828,7 +828,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
||||
For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the
|
||||
[Template Syntax](guide/template-syntax) page.
|
||||
|
||||
要了解样式绑定的更多知识,参见[模板语法](guide/template-syntax)中的[样式绑定](guide/template-syntax#style-binding)部分。
|
||||
要了解关于样式绑定的更多知识,参见[模板语法](guide/template-syntax)中的[样式绑定](guide/template-syntax#style-binding)部分。
|
||||
|
||||
For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle)
|
||||
section of the [Template Syntax](guide/template-syntax) page.
|
||||
@ -1028,7 +1028,7 @@ AngularJS 中的很多内置过滤器在 Angular 中都有对应的管道。
|
||||
|
||||
Selects a subset of items from the defined collection, based on the filter criteria.
|
||||
|
||||
基于过滤条件从指定的集合中选取出一个子集。
|
||||
根据过滤条件从指定的集合中选取出一个子集。
|
||||
|
||||
</td>
|
||||
|
||||
@ -1227,7 +1227,7 @@ 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**.
|
||||
@ -1593,7 +1593,7 @@ also encapsulate a style sheet within a specific component.
|
||||
This allows you to set appropriate styles for individual components that won’t leak into
|
||||
other parts of the application.
|
||||
|
||||
这让你可以为各个组件设置合适的样式,而不用担心它被泄漏到程序中的其它部分。
|
||||
这让你可以为各个组件设置合适的样式,而不用担心它泄漏到程序中的其它部分。
|
||||
|
||||
</td>
|
||||
|
||||
|
@ -269,7 +269,7 @@ region="transition2">
|
||||
|
||||
* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation has completed.
|
||||
|
||||
请用 `state()` 来定义那些在每个转场结束时样式,这些样式在动画结束时会保留。
|
||||
请用 `state()` 来定义那些每个转场结束时的样式,这些样式在动画完成后仍会保留。
|
||||
|
||||
* Use `transition()` to define intermediate styles, which create the illusion of motion during the animation.
|
||||
|
||||
|
@ -13,7 +13,7 @@ The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScri
|
||||
|
||||
This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.
|
||||
|
||||
本指南中解释了如何指定元数据,并通过一些编译器选项来借助 AOT 编译器来更有效的编译应用。
|
||||
本指南中解释了如何指定元数据,并使用一些编译器选项以借助 AOT 编译器来更有效的编译应用。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@ -54,7 +54,7 @@ JIT compilation is the default when you run the [`ng build`](cli/build) (build o
|
||||
|
||||
For AOT compilation, include the `--aot` option with the `ng build` or `ng serve` command:
|
||||
|
||||
要进行 AOT 编译只要给 `ng build` 或 `ng serve` 命令添加 `--aot` 标志就行了:
|
||||
要进行 AOT 编译,只要让 `ng build` 或 `ng serve` 命令中包含 `--aot` 标志就行了:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng build --aot
|
||||
|
@ -302,7 +302,7 @@ The example template uses two built-in structural directives to add application
|
||||
|
||||
* [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
|
||||
|
||||
[`*ngFor`](guide/displaying-data#ngFor) 是一个迭代器,它要求 Angular 为 `heroes` 列表中的每个 `<li>` 渲染出一个 `<li>`。
|
||||
[`*ngFor`](guide/displaying-data#ngFor) 是一个迭代器,它要求 Angular 为 `heroes` 列表中的每个英雄渲染出一个 `<li>`。
|
||||
|
||||
* [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
|
||||
|
||||
|
@ -237,7 +237,7 @@ each adorned by the `HostListener` decorator.
|
||||
The `@HostListener` decorator lets you subscribe to events of the DOM
|
||||
element that hosts an attribute directive, the `<p>` in this case.
|
||||
|
||||
`@HostListener` 装饰器引用属性型指令的宿主元素,在这个例子中就是 `<p>`。
|
||||
`@HostListener` 装饰器让你订阅某个属性型指令所在的宿主 DOM 元素的事件,在这个例子中就是 `<p>`。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@ -282,7 +282,7 @@ Here's the updated directive in full:
|
||||
Run the app and confirm that the background color appears when
|
||||
the mouse hovers over the `p` and disappears as it moves out.
|
||||
|
||||
运行本应用并确认:当把鼠标移到 `p` 上的时候,背景色就出现了,而移开的时候,它消失了。
|
||||
运行本应用并确认:当把鼠标移到 `p` 上的时候,背景色就出现了,而移开时就消失了。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
|
||||
@ -383,7 +383,7 @@ 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` 指定为别名。
|
||||
恢复原始属性名,并在 `@Input` 的参数中把该选择器指定为别名。
|
||||
|
||||
<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" header="src/app/highlight.directive.ts (color property with alias)" region="color"></code-example>
|
||||
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
This page discusses build-specific configuration options for Angular projects.
|
||||
|
||||
本文讨论的是 Angular 应用中与构建相关的配置项。
|
||||
本文讨论的是 Angular 项目中与构建有关的配置项。
|
||||
|
||||
{@a app-environments}
|
||||
|
||||
@ -398,7 +398,7 @@ Each budget entry is a JSON object with the following properties:
|
||||
|
||||
Warns when the size ??reaches or exceeds?? this threshold percentage of the baseline.
|
||||
|
||||
当大小小于或超过基线的这个阈值百分比时都给出警告。
|
||||
当大小达到或小于基线的这个阈值百分比时都给出警告。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
@ -408,7 +408,7 @@ Each budget entry is a JSON object with the following properties:
|
||||
|
||||
Reports an error when the size ??reaches or exceeds?? this threshold percentage of the baseline.
|
||||
|
||||
当大小小于或超过基线的这个阈值百分比时都报错。
|
||||
当大小达到或小于基线的这个阈值百分比时都报错。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -422,7 +422,7 @@ Added the `moduleId: module.id` property-and-value to their `@Component` metadat
|
||||
This change is a requirement for compilation with AOT compiler when the app loads
|
||||
modules with SystemJS as the samples currently do.
|
||||
|
||||
当应用像例子当前使用的方法一样 - 使用 SystemJS 加载模块时,本更新是 AOT 编译器的前提条件。
|
||||
当应用像这个例子一样使用 SystemJS 方式加载模块时,这种修改是进行 AOT 编译器的前提。
|
||||
|
||||
## "Lifecycle Hooks" guide simplified (2016-09-24)
|
||||
|
||||
|
@ -358,7 +358,7 @@ is available to <code>declarations</code> of this module.</p>
|
||||
|
||||
<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>
|
||||
|
||||
<p>使用名叫<code>myCardNumberFormatter</code>的管道对表达式<code>cardNumber</code>的当前值进行变幻</p>
|
||||
<p>使用名叫<code>myCardNumberFormatter</code>的管道对表达式<code>cardNumber</code>的当前值进行转换。</p>
|
||||
|
||||
</td>
|
||||
|
||||
@ -476,7 +476,7 @@ is available to <code>declarations</code> of this module.</p>
|
||||
|
||||
<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
|
||||
|
||||
<p>根据<code>conditionExpression</code>的当前值选择一个嵌入式模板,并用它替换这个 div 的内容。</p>
|
||||
<p>根据<code>conditionExpression</code>的当前值选择一个嵌入式模板,并据此决定是否替换掉这个 div 的内容。</p>
|
||||
|
||||
</td>
|
||||
|
||||
|
@ -104,7 +104,7 @@ sub.unsubscribe();
|
||||
|
||||
* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable.
|
||||
|
||||
可观察对象的错误处理是交给订阅者的错误处理器的,并且该订阅者会自动取消对这个可观察对象的订阅。
|
||||
可观察对象的错误处理工作交给了订阅者的错误处理器,并且该订阅者会自动取消对这个可观察对象的订阅。
|
||||
|
||||
<code-example hideCopy>
|
||||
obs.subscribe(() => {
|
||||
|
@ -86,7 +86,7 @@ The running application displays three heroes:
|
||||
|
||||
E2E test that all children were instantiated and displayed as expected:
|
||||
|
||||
端到端测试,用于确保所有的子组件都像所期待的那样被初始化并显示出来。
|
||||
端到端测试,用于确保所有的子组件都如预期般初始化并显示出来:
|
||||
|
||||
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child" header="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||
|
||||
@ -243,7 +243,7 @@ payload `$event` and updates a counter.
|
||||
The framework passes the event argument—represented by `$event`—to the handler method,
|
||||
and the method processes it:
|
||||
|
||||
本框架把事件参数(用 `$event` 表示)传给事件处理方法,这个方法会处理:
|
||||
本框架把事件参数(用 `$event` 表示)传给事件处理方法,该方法会处理它:
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
|
||||
@ -394,7 +394,7 @@ It takes a bit more work to get the child view into the parent component *class*
|
||||
|
||||
First, you have to import references to the `ViewChild` decorator and the `AfterViewInit` lifecycle hook.
|
||||
|
||||
首先,你要使用 `ViewChild` 装饰器导入这个引用,并挂上 `AfterViewInit` 生命周期钩子。
|
||||
首先,你必须导入对装饰器 `ViewChild` 以及生命周期钩子 `AfterViewInit` 的引用。
|
||||
|
||||
Next, inject the child `CountdownTimerComponent` into the private `timerComponent` property
|
||||
via the `@ViewChild` property decoration.
|
||||
@ -450,7 +450,7 @@ Use [the same countdown timer tests](guide/component-interaction#countdown-tests
|
||||
A parent component and its children share a service whose interface enables bi-directional communication
|
||||
*within the family*.
|
||||
|
||||
父组件和它的子组件共享同一个服务,利用该服务*在家庭内部*实现双向通讯。
|
||||
父组件和它的子组件共享同一个服务,利用该服务*在组件家族内部*实现双向通讯。
|
||||
|
||||
The scope of the service instance is the parent component and its children.
|
||||
Components outside this component subtree have no access to the service or their communications.
|
||||
|
@ -76,7 +76,7 @@ This scoping restriction is a ***styling modularity feature***.
|
||||
* Class names and selectors are local to the component and don't collide with
|
||||
classes and selectors used elsewhere in the application.
|
||||
|
||||
类名和选择器是仅属于组件内部的,它不会和应用中其它地方的类名和选择器出现冲突。
|
||||
类名和选择器是局限于该组件的,它不会和应用中其它地方的类名和选择器冲突。
|
||||
|
||||
* Changes to styles elsewhere in the application don't affect the component's styles.
|
||||
|
||||
@ -90,7 +90,7 @@ This scoping restriction is a ***styling modularity feature***.
|
||||
* 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}
|
||||
|
||||
@ -316,7 +316,7 @@ ng generate component hero-app
|
||||
You can embed CSS styles directly into the HTML template by putting them
|
||||
inside `<style>` tags.
|
||||
|
||||
你也可以在组件的 HTML 模板中嵌入 `<style>` 标签。
|
||||
你也可以直接在组件的 HTML 模板中写 `<style>` 标签来内嵌 CSS 样式。
|
||||
|
||||
<code-example path="component-styles/src/app/hero-controls.component.ts" region="inlinestyles" header="src/app/hero-controls.component.ts">
|
||||
</code-example>
|
||||
@ -523,7 +523,7 @@ There are two kinds of generated attributes:
|
||||
* An element within a component's view has a `_ngcontent` attribute
|
||||
that identifies to which host's emulated shadow DOM this element belongs.
|
||||
|
||||
组件视图中的每一个元素,都有一个 `_ngcontent` 属性,它会标记出该元素是哪个宿主的模拟 Shadow DOM。
|
||||
组件视图中的每一个元素,都有一个 `_ngcontent` 属性,它会标记出该元素属于哪个宿主的模拟 Shadow DOM。
|
||||
|
||||
The exact values of these attributes aren't important. They are automatically
|
||||
generated and you never refer to them in application code. But they are targeted
|
||||
|
@ -220,7 +220,7 @@ through the injector tree until it reaches the root injector.
|
||||
|
||||
* The first injector configured with a provider supplies the dependency (a service instance or value) to the constructor.
|
||||
|
||||
第一个配置了该提供商的注入器就会把依赖(服务实例或值)提供给这个构造函数。
|
||||
第一个配置过该提供商的注入器就会把依赖(服务实例或值)提供给这个构造函数。
|
||||
|
||||
* If no provider is found in the root injector, the DI framework returns null to the constructor.
|
||||
|
||||
@ -410,7 +410,7 @@ As a result, you might need to access a component's DOM element.
|
||||
To illustrate, here's a simplified version of `HighlightDirective` from
|
||||
the [Attribute Directives](guide/attribute-directives) page.
|
||||
|
||||
要说明这一点,请在[属性型指令](guide/attribute-directives)`HighlightDirective` 的基础上,编写一个简化版。
|
||||
为了说明这一点,请看[属性型指令](guide/attribute-directives)中那个 `HighlightDirective` 的简化版。
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/highlight.directive.ts" header="src/app/highlight.directive.ts">
|
||||
|
||||
@ -439,7 +439,7 @@ first without a value (yielding the default color) and then with an assigned col
|
||||
|
||||
The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.
|
||||
|
||||
下图显示了鼠标移到 `<hero-bios-and-contacts>` 标签的效果:
|
||||
下图显示了鼠标移到 `<hero-bios-and-contacts>` 标签上的效果:
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
|
||||
@ -693,7 +693,7 @@ The following example puts `MinimalLogger` to use in a simplified version of `H
|
||||
|
||||
The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor.
|
||||
|
||||
`HeroOfTheMonthComponent` 构造函数的 `logger` 参数是一个 `MinimalLogger` 类型,支持 TypeScript 的编辑器里,只能看到它的两个成员 `logs` 和 `logInfo`:
|
||||
`HeroOfTheMonthComponent` 构造函数的 `logger` 参数是一个 `MinimalLogger` 类型,在支持 TypeScript 感知的编辑器里,只能看到它的两个成员 `logs` 和 `logInfo`:
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
|
||||
@ -776,7 +776,7 @@ the string of names.
|
||||
Angular supplies these arguments from injected values identified by
|
||||
the two *tokens* in the `deps` array.
|
||||
|
||||
Angular 根据 `deps` 数组中指定的两个*令牌*来获得这些注入参数。
|
||||
Angular 根据 `deps` 数组中指定的两个*令牌*来提供这些注入参数。
|
||||
|
||||
* The function returns the string of names, which Angular than injects into
|
||||
the `runnersUp` parameter of `HeroOfTheMonthComponent`.
|
||||
|
@ -21,7 +21,7 @@ If you specify the service class itself as the provider token, the default behav
|
||||
|
||||
In the following typical example, the `Logger` class itself provides a `Logger` instance.
|
||||
|
||||
在下面这个典型的例子中,由 `Logger` 类本身提供 `Logger` 的实例。
|
||||
在下面这个典型的例子中,`Logger` 类资深提供了 `Logger` 的实例。
|
||||
|
||||
<code-example path="dependency-injection/src/app/providers.component.ts" region="providers-logger">
|
||||
</code-example>
|
||||
@ -285,7 +285,7 @@ the help of an `@Inject()` parameter decorator.
|
||||
Although the `AppConfig` interface plays no role in dependency injection,
|
||||
it supports typing of the configuration object within the class.
|
||||
|
||||
虽然 `AppConfig` 接口对依赖注入本身没有任何作用,但是它可以在这个组件类中提供类型信息。
|
||||
虽然 `AppConfig` 接口在依赖注入时没有任何作用,但它可以为该组件类中的这个配置对象指定类型信息。
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -56,7 +56,7 @@ Its only purpose is to display `HeroListComponent`, which displays a list of her
|
||||
This version of the `HeroListComponent` gets heroes from the `HEROES` array, an in-memory collection
|
||||
defined in a separate `mock-heroes` file.
|
||||
|
||||
`HeroListComponent` 的这个版本从 `HEROES` 数组(它通过一个独立的 `mock-heroes` 文件定义了一个内存集合)中获取英雄。
|
||||
`HeroListComponent` 的这个版本从 `HEROES` 数组(它在一个独立的 `mock-heroes` 文件中定义了一个内存集合)中获取英雄。
|
||||
|
||||
<code-example header="src/app/heroes/hero-list.component.ts (class)" path="dependency-injection/src/app/heroes/hero-list.component.1.ts" region="class">
|
||||
</code-example>
|
||||
@ -182,7 +182,7 @@ from the injector of its parent NgModule, or from the `root` injector.
|
||||
|
||||
You can configure injectors with providers at different levels of your app, by setting a metadata value in one of three places:
|
||||
|
||||
你可以用三种方式之一来设置元数据,以便在应用的不同层级使用提供商来配置各个注入器:
|
||||
你可以在三种位置之一设置元数据,以便在应用的不同层级使用提供商来配置注入器:
|
||||
|
||||
* In the `@Injectable()` decorator for the service itself.
|
||||
|
||||
|
@ -200,7 +200,7 @@ directly since you imported `ReactiveFormsModule` from `AppModule`.
|
||||
|
||||
`DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`.
|
||||
|
||||
`DynamicForm` 期望得到一个问题列表,该列表被绑定到 `@Input() questions` 属性。
|
||||
`DynamicFormComponent` 期望得到一个问题列表,该数组被绑定到 `@Input() questions` 属性。
|
||||
|
||||
The set of questions you've defined for the job application is returned from the `QuestionService`.
|
||||
In a real app you'd retrieve these questions from storage.
|
||||
|
@ -66,7 +66,7 @@ API reference.
|
||||
* The `*ngIf` on the `<div>` element reveals a set of nested message `divs`
|
||||
but only if the `name` is invalid and the control is either `dirty` or `touched`.
|
||||
|
||||
`<div>` 元素的 `*ngIf` 揭露了一套嵌套消息 `divs`,但是只在有“name”错误和控制器为 `dirty` 或者 `touched`。
|
||||
`<div>` 元素的 `*ngIf` 展示了一组嵌套的消息 `div`,但是只在有“name”错误和控制器为 `dirty` 或者 `touched` 时才出现。
|
||||
|
||||
* Each nested `<div>` can present a custom message for one of the possible validation errors.
|
||||
There are messages for `required`, `minlength`, and `forbiddenName`.
|
||||
@ -256,7 +256,7 @@ The corresponding `ForbiddenValidatorDirective` serves as a wrapper around the `
|
||||
Angular recognizes the directive's role in the validation process because the directive registers itself
|
||||
with the `NG_VALIDATORS` provider, a provider with an extensible collection of validators.
|
||||
|
||||
Angular 在验证流程中的识别出指令的作用,是因为指令把自己注册到了 `NG_VALIDATORS` 提供商中,该提供商拥有一组可扩展的验证器。
|
||||
Angular 在验证过程中能识别出指令的作用,是因为指令把自己注册成了 `NG_VALIDATORS` 提供商,该提供商拥有一组可扩展的验证器。
|
||||
|
||||
<code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive-providers" header="shared/forbidden-name.directive.ts (providers)" linenums="false">
|
||||
</code-example>
|
||||
|
@ -212,6 +212,7 @@ The steps below outline the data flow from model to view.
|
||||
1. The user calls the `favoriteColorControl.setValue()` method, which updates the `FormControl` value.
|
||||
|
||||
`favoriteColorControl.setValue()` 方法被调用,它会更新这个 `FormControl` 的值。
|
||||
|
||||
1. The `FormControl` instance emits the new value through the `valueChanges` observable.
|
||||
|
||||
`FormControl` 实例会通过 `valueChanges` 这个可观察对象发出新值。
|
||||
@ -238,7 +239,7 @@ In template-driven forms, each form element is linked to a directive that manage
|
||||
|
||||
The steps below outline the data flow from view to model when the input value changes from *Red* to *Blue*.
|
||||
|
||||
下面这些步骤列出了当输入框的值从 *Red* 变成 *Blue* 时 "从视图到模型" 的数据流梗概。
|
||||
下面这些步骤列出了当输入框的值从 *Red* 变成 *Blue* 时 "从视图到模型" 的数据流概况。
|
||||
|
||||
1. The user types *Blue* into the input element.
|
||||
|
||||
@ -274,7 +275,7 @@ is updated to the value emitted by the `ngModelChange` event (*Blue*).
|
||||
|
||||
The steps below outline the data flow from model to view when the `favoriteColor` changes from *Blue* to *Red*.
|
||||
|
||||
下面这些步骤列出了当 `favoriteColor` 从 *Blue* 变为 *Red* 时,"从模型到视图" 的数据流梗概。
|
||||
下面这些步骤列出了当 `favoriteColor` 从 *Blue* 变为 *Red* 时,"从模型到视图" 的数据流概况。
|
||||
|
||||
1. The `favoriteColor` value is updated in the component.
|
||||
|
||||
@ -374,7 +375,7 @@ Here are the steps performed in the view to model test.
|
||||
|
||||
1. Assert that the component's `favoriteColorControl` value matches the value from the input.
|
||||
|
||||
断言 `favoriteColor` 这个 `FormControl` 实例的值与来自输入框的值是匹配的。
|
||||
断言该组件的 `favoriteColorControl` 的值与来自输入框的值是匹配的。
|
||||
|
||||
The following test verifies the data flow from model to view.
|
||||
|
||||
@ -389,7 +390,8 @@ Here are the steps performed in the model to view test.
|
||||
|
||||
1. Use the `favoriteColorControl`, a `FormControl` instance, to set the new value.
|
||||
|
||||
使用 `favoriteColor` 这个 `FormControl` 实例来设置新值。
|
||||
使用 `favoriteColorControl` 这个 `FormControl` 实例来设置新值。
|
||||
|
||||
1. Query the view for the form input element.
|
||||
|
||||
查询表单中输入框的视图。
|
||||
@ -471,7 +473,7 @@ Here are the steps performed in the model to view test.
|
||||
|
||||
The change tracking method plays a role in the efficiency of your application.
|
||||
|
||||
追踪变更的方法对于应用的运行效率有着重要影响。
|
||||
追踪变更的方法对于应用的运行效率有着重要作用。
|
||||
|
||||
* **Reactive forms** keep the data model pure by providing it as an immutable data structure. Each time a change is triggered on the data model, the `FormControl` instance returns a new data model rather than updating the existing data model. This gives you the ability to track unique changes to the data model through the control's observable. This provides one way for change detection to be more efficient because it only needs to update on unique changes. It also follows reactive patterns that integrate with observable operators to transform data.
|
||||
|
||||
|
@ -11,7 +11,7 @@ schedule a meeting, and perform countless other data-entry tasks.
|
||||
In developing a form, it's important to create a data-entry experience that guides the
|
||||
user efficiently and effectively through the workflow.
|
||||
|
||||
在开发表单时,创建数据方面的体验是非常重要的,它能指引用户明细、高效的完成工作流程。
|
||||
在开发表单时,创建数据方面的体验是非常重要的,它能指引用户明晰、高效的完成工作流程。
|
||||
|
||||
## Introduction to Template-driven forms
|
||||
|
||||
@ -959,7 +959,7 @@ In this example, you hide the message when the control is valid or pristine;
|
||||
"pristine" means the user hasn't changed the value since it was displayed in this form.
|
||||
|
||||
上例中,当控件是有效的 (valid) 或全新的 (pristine) 时,隐藏消息。
|
||||
“全新的”意味着从它被显示在表单中开始,用户还从未修改过它的值。
|
||||
“全新的”意味着从它显示在表单中开始,用户还从未修改过它的值。
|
||||
|
||||
This user experience is the developer's choice. Some developers want the message to display at all times.
|
||||
If you ignore the `pristine` state, you would hide the message only when the value is valid.
|
||||
@ -1138,7 +1138,7 @@ For a more strikingly visual effect,
|
||||
hide the data entry area and display something else.
|
||||
|
||||
来实现一些更炫的视觉效果吧。
|
||||
隐藏掉数据输入框,显示一些其它东西。
|
||||
隐藏掉数据输入框,显示一些别的东西。
|
||||
|
||||
Wrap the form in a `<div>` and bind
|
||||
its `hidden` property to the `HeroFormComponent.submitted` property.
|
||||
@ -1184,7 +1184,7 @@ This `<div>` appears only while the component is in the submitted state.
|
||||
The HTML includes an *Edit* button whose click event is bound to an expression
|
||||
that clears the `submitted` flag.
|
||||
|
||||
这段 HTML 包含一个 “Edit(编辑)”按钮,将 click 事件绑定到表达式,用于清除 `submitted` 标志。
|
||||
这段 HTML 包含一个 “Edit(编辑)”按钮,它的 click 事件绑定到了一个用于清除 `submitted` 标志的表达式。
|
||||
|
||||
When you click the *Edit* button, this block disappears and the editable form reappears.
|
||||
|
||||
|
@ -246,7 +246,7 @@ directives in `CommonModule`; they don’t need to re-install app-wide providers
|
||||
If you do import `BrowserModule` into a lazy loaded feature module,
|
||||
Angular returns an error telling you to use `CommonModule` instead.
|
||||
|
||||
如果你把 `BrowserModule` 导入了惰性加载的特性模块中,Angular 就会返回一个错误,并告诉你应该改用 `CommonModule`。
|
||||
如果你把 `BrowserModule` 导入了惰性加载的特性模块中,Angular 就会返回一个错误,并告诉你要改用 `CommonModule`。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/frequent-ngmodules/browser-module-error.gif" width=750 alt="BrowserModule error">
|
||||
|
@ -13,7 +13,7 @@ This glossary lists the most prominent terms
|
||||
and a few less familiar ones with unusual or
|
||||
unexpected definitions.
|
||||
|
||||
本词汇表列出了常用术语和少量具有独特或反直觉含义的罕用术语。
|
||||
本词汇表列出了常用术语和少量具有反常或意外含义的不常用术语。
|
||||
|
||||
[A](guide/glossary#A) [B](guide/glossary#B) [C](guide/glossary#C) [D](guide/glossary#D) [E](guide/glossary#E) [F](guide/glossary#F) [G](guide/glossary#G) [H](guide/glossary#H) [I](guide/glossary#I)
|
||||
[J](guide/glossary#J) [K](guide/glossary#K) [L](guide/glossary#L) [M](guide/glossary#M) [N](guide/glossary#N) [O](guide/glossary#O) [P](guide/glossary#P) [Q](guide/glossary#Q) [R](guide/glossary#R)
|
||||
@ -484,7 +484,7 @@ A technique for adding a component to the DOM at run time. Requires that you exc
|
||||
|
||||
See also [custom element](guide/glossary#custom-element), which provides an easier path with the same result.
|
||||
|
||||
参见[自定义组件](guide/glossary#custom-element),它提供了一种更简单的方式来达到相同的效果。
|
||||
参见[自定义元素](guide/glossary#custom-element),它提供了一种更简单的方式来达到相同的效果。
|
||||
|
||||
{@a E}
|
||||
|
||||
@ -656,7 +656,7 @@ Angular [依赖注入系统](guide/glossary#dependency-injection)中可以在缓
|
||||
|
||||
* You can configure injectors with different providers that can provide different implementations of the same dependency.
|
||||
|
||||
你可以为同一个依赖使用不同的提供商来配置这些注入器,这些提供商可以为依赖提供不同的实现。
|
||||
你可以为同一个依赖使用不同的提供商来配置这些注入器,这些提供商可以为同一个依赖提供不同的实现。
|
||||
|
||||
Learn more about the injector hierarchy in [Hierarchical Dependency Injectors](guide/hierarchical-dependency-injection).
|
||||
|
||||
|
@ -34,7 +34,7 @@ an NgModule, directive-level injectors follow the structure of the component hie
|
||||
|
||||
The choices you make about where to configure providers lead to differences in the final bundle size, service _scope_, and service _lifetime_.
|
||||
|
||||
关于在哪里配置提供商的不同选择将导致一些差异:最终包的大小、服务的*范围*和服务的*生命周期*。
|
||||
对于在哪里配置提供商的不同选择会带来一些差异:最终包的大小、服务的*范围*和服务的*生命周期*。
|
||||
|
||||
When you specify providers in the `@Injectable()` decorator of the service itself (typically at the app root level), optimization tools such as those used by the CLI's production builds can perform *tree shaking*, which removes services that aren't used by your app. Tree shaking results in smaller bundle sizes.
|
||||
|
||||
@ -87,7 +87,7 @@ Use the `@NgModule()` `provides` option if a module is [lazy loaded](guide/lazy-
|
||||
|
||||
For both root-level and module-level injectors, a service instance lives for the life of the app or module, and Angular injects this one service instance in every class that needs it.
|
||||
|
||||
无论对于根级注入器还是模块级注入器,服务实例的生命周期都和应用或模块本身相同。Angular 可以把服务实例注入给任何需要它的类中。
|
||||
无论对于根级注入器还是模块级注入器,服务实例的生存期都和应用或模块本身相同。Angular 可以把这个服务实例注入到任何需要它的类中。
|
||||
|
||||
*Component-level* providers configure each component instance's own injector.
|
||||
Angular can only inject the corresponding services in that component instance or one of its descendant component instances.
|
||||
@ -331,7 +331,7 @@ The guide sample offers some scenarios where you might want to do so.
|
||||
|
||||
Architectural reasons may lead you to restrict access to a service to the application domain where it belongs.
|
||||
|
||||
出于架构方面的考虑,可能会让你决定把一个服务限制到只能在它所属的特定领域中访问。
|
||||
出于架构方面的考虑,可能会让你决定把一个服务限制到只能在它所属的那个应用域中访问。
|
||||
|
||||
For example, the guide sample includes a `VillainsListComponent` that displays a list of villains.
|
||||
It gets those villains from a `VillainsService`.
|
||||
@ -501,7 +501,7 @@ You create a car component (A) that displays a car constructed from these three
|
||||
Then you create a child component (B) that defines its own, _specialized_ providers for `CarService` and `EngineService`
|
||||
that have special capabilities suitable for whatever is going on in component (B).
|
||||
|
||||
然后,你创建一个子组件(B),它为 `CarService` 和 `EngineService` 定义了自己的*特殊的*提供商,它们具有更特殊的能力,适用于组件 B 的。
|
||||
然后,你创建一个子组件(B),它为 `CarService` 和 `EngineService` 定义了自己*特有的*提供商,它们具有适用于组件 B 的特有能力。
|
||||
|
||||
Component (B) is the parent of another component (C) that defines its own, even _more specialized_ provider for `CarService`.
|
||||
|
||||
|
@ -155,7 +155,7 @@ The `HttpClient.get()` method parsed the JSON server response into the anonymous
|
||||
|
||||
You can tell `HttpClient` the type of the response to make consuming the output easier and more obvious.
|
||||
|
||||
你可以告诉 `HttpClient` 该响应体的类型,以便让对这种输出的消费更容易、更明确。
|
||||
你可以告诉 `HttpClient` 该响应体的类型,以便在消费这种输出时更容易、更明确。
|
||||
|
||||
First, define an interface with the correct shape:
|
||||
|
||||
@ -630,7 +630,7 @@ We have discussed the basic HTTP functionality in `@angular/common/http`, but so
|
||||
Other aspects of an outgoing request can be configured via the options object
|
||||
passed as the last argument to the `HttpClient` method.
|
||||
|
||||
待发送请求的其它方面可以通过传给 `HttpClient` 方法最后一个参数中的配置对象进行配置。
|
||||
待发送请求的其它方面可以通过传给 `HttpClient` 方法的最后一个参数指定的配置对象进行配置。
|
||||
|
||||
You [saw earlier](#adding-headers) that the `HeroesService` sets the default headers by
|
||||
passing an options object (`httpOptions`) to its save methods.
|
||||
@ -787,7 +787,7 @@ The `switchMap()` operator has three important characteristics.
|
||||
2. If a previous search request is still _in-flight_ (as when the connection is poor),
|
||||
it cancels that request and sends a new one.
|
||||
|
||||
如果以前的搜索结果仍然是*在途*状态(这会出现在慢速网络中),它会取消那个请求,并发起这个新的搜索。
|
||||
如果以前的搜索结果仍然是*在途*状态(这会出现在慢速网络中),它会取消那个请求,并发起一次新的搜索。
|
||||
|
||||
3. It returns service responses in their original request order, even if the
|
||||
server returns them out of order.
|
||||
@ -1026,7 +1026,7 @@ the `HttpRequest` and `HttpResponse` instance properties are `readonly`,
|
||||
rendering them largely immutable.
|
||||
|
||||
虽然拦截器有能力改变请求和响应,但 `HttpRequest` 和 `HttpResponse` 实例的属性却是只读(`readonly`)的,
|
||||
因此,它们在很大意义上说是不可变对象。
|
||||
因此让它们基本上是不可变的。
|
||||
|
||||
They are immutable for a good reason: the app may retry a request several times before it succeeds, which means that the interceptor chain may re-process the same request multiple times.
|
||||
If an interceptor could modify the original request object, the re-tried operation would start from the modified request rather than the original. Immutability ensures that interceptors see the same request for each try.
|
||||
@ -1349,7 +1349,7 @@ Give the users a better experience by providing feedback on the progress of such
|
||||
To make a request with progress events enabled, you can create an instance of `HttpRequest`
|
||||
with the `reportProgress` option set true to enable tracking of progress events.
|
||||
|
||||
要想开启进度事件的响应,你可以创建一个把 `reportProgress` 选项设置为 `true` 的 `HttpRequest` 实例,以开启进度跟踪事件。
|
||||
要想发起带有进度事件的请求,你可以创建一个把 `reportProgress` 选项设置为 `true` 的 `HttpRequest` 实例,以开启进度跟踪事件。
|
||||
|
||||
<code-example
|
||||
path="http/src/app/uploader/uploader.service.ts"
|
||||
@ -1524,7 +1524,7 @@ the setup of the _service-under-test_.
|
||||
|
||||
Now requests made in the course of your tests will hit the testing backend instead of the normal backend.
|
||||
|
||||
现在,在测试中发起的这些请求将会被这些测试后端(testing backend)处理,而不是标准的后端。
|
||||
现在,在测试中发起的这些请求会发给这些测试用的后端(testing backend),而不是标准的后端。
|
||||
|
||||
This setup also calls `TestBed.get()` to inject the `HttpClient` service and the mocking controller
|
||||
so they can be referenced during the tests.
|
||||
@ -1574,7 +1574,7 @@ For example, you could look for an outgoing request that has an authorization he
|
||||
As with the previous `expectOne()`,
|
||||
the test will fail if 0 or 2+ requests satisfy this predicate.
|
||||
|
||||
和前面根据 URL 进行测试时一样,如果零或两个以上的请求匹配上了这个期待,它就会抛出异常。
|
||||
像前面的 `expectOne()` 测试一样,如果零或两个以上的请求满足了这个断言,它就会抛出异常。
|
||||
|
||||
#### Handling more than one request
|
||||
|
||||
|
@ -307,7 +307,7 @@ To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag
|
||||
|
||||
To translate a text message accurately, the translator may need additional information or context.
|
||||
|
||||
要想翻译的更准确,翻译人员可能需要待翻译文本的额外信息或场景说明。
|
||||
要想翻译的更准确,翻译人员可能需要待翻译文本的额外信息或上下文。
|
||||
|
||||
You can add a description of the text message as the value of the `i18n` attribute, as shown in the
|
||||
example below:
|
||||
|
@ -99,7 +99,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
||||
|
||||
Called before `ngOnInit()` and whenever one or more data-bound input properties change.
|
||||
|
||||
当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 `ngOnInit()` 之前。
|
||||
在 `ngOnInit()` 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
|
||||
|
||||
</td>
|
||||
|
||||
@ -142,7 +142,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
||||
|
||||
Called during every change detection run, immediately after `ngOnChanges()` and `ngOnInit()`.
|
||||
|
||||
在每个变更检测周期中调用,`ngOnChanges()` 和 `ngOnInit()` 之后。
|
||||
在每个变更检测周期中,紧跟在 `ngOnChanges()` 和 `ngOnInit()` 后面调用。
|
||||
|
||||
</td>
|
||||
|
||||
@ -591,7 +591,7 @@ The heroes will never know they're being watched.
|
||||
The sneaky spy directive is simple, consisting almost entirely of `ngOnInit()` and `ngOnDestroy()` hooks
|
||||
that log messages to the parent via an injected `LoggerService`.
|
||||
|
||||
这个鬼鬼祟祟的侦探指令很简单,几乎完全由 `ngOnInit()` 和 `ngOnDestroy()` 钩子组成,它通过一个注入进来的 `LoggerService` 来把消息记录到父组件中去。
|
||||
这个鬼鬼祟祟的侦探指令很简单,几乎完全由 `ngOnInit()` 和 `ngOnDestroy()` 钩子组成,它通过一个注入进来的 `LoggerService` 把消息记录到父组件中去。
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/spy.directive.ts" region="spy-directive" header="src/app/spy.directive.ts" linenums="false"></code-example>
|
||||
|
||||
@ -647,7 +647,7 @@ Use `ngOnInit()` for two main reasons:
|
||||
|
||||
Experienced developers agree that components should be cheap and safe to construct.
|
||||
|
||||
有经验的开发者会认同组件的构建应该很便宜和安全。
|
||||
有经验的开发者会认同组件应该能很便宜和安全的构造出来。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@ -793,7 +793,7 @@ Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch
|
||||
|
||||
The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck()` hook:
|
||||
|
||||
*DoCheck* 范例通过下面的 `ngDoCheck()` 实现扩展了 *OnChanges* 范例:
|
||||
*DoCheck* 范例通过下面的 `ngDoCheck()` 钩子扩展了 *OnChanges* 范例:
|
||||
|
||||
<code-example path="lifecycle-hooks/src/app/do-check.component.ts" region="ng-do-check" header="DoCheckComponent (ngDoCheck)" linenums="false"></code-example>
|
||||
|
||||
|
@ -40,7 +40,7 @@ The metadata falls into three categories:
|
||||
|
||||
* **Composability/Grouping:** Bringing NgModules together and making them available via the `imports` and `exports` arrays.
|
||||
|
||||
**组合/分组:**通过 `imports` 和 `exports` 数组来把多个 NgModule 放在一起,并彼此可用。
|
||||
**组合/分组:**通过 `imports` 和 `exports` 数组来把多个 NgModule 放在一起,并让它们可用。
|
||||
|
||||
```typescript
|
||||
|
||||
@ -319,7 +319,7 @@ The following table summarizes the `@NgModule` metadata properties.
|
||||
Angular can launch with multiple bootstrap components,
|
||||
each with its own location in the host web page.
|
||||
|
||||
Angular 也可以引导多个引导组件,它们每一个都在宿主页面中有自己的位置。
|
||||
Angular 也可以用多个引导组件进行启动,它们每一个在宿主页面中都有自己的位置。
|
||||
|
||||
A bootstrap component is automatically added to `entryComponents`.
|
||||
|
||||
|
@ -113,12 +113,12 @@ Membership in one list doesn't imply membership in another list.
|
||||
|
||||
* A component could be imported from another app module (so you can't declare it) and re-exported by this module.
|
||||
|
||||
`HeroComponent` 可能是从另一个应用模块中导入的(所以你没法声明它)并且被当前模块重新导出。
|
||||
某个组件可能是从另一个应用模块中导入的(所以你没法声明它)并且被当前模块重新导出。
|
||||
|
||||
* A component could be exported for inclusion in an external component's template
|
||||
as well as dynamically loaded in a pop-up dialog.
|
||||
|
||||
`HeroComponent` 可能被导入,以便用在外部组件的模板中,但也可能同时被一个弹出式对话框加载。
|
||||
某个组件可能被导出,以便用在外部组件的模板中,也可能同时被一个弹出式对话框加载。
|
||||
|
||||
<hr/>
|
||||
|
||||
@ -716,7 +716,7 @@ and delivers the app-wide singleton service. No problem.
|
||||
|
||||
Now consider a lazy loaded module that also provides a service called `UserService`.
|
||||
|
||||
现在,该考虑 `HeroModule` 了,*它是惰性加载的!*。
|
||||
现在,考虑一个惰性加载的模块,它也提供了一个名叫 `UserService` 的服务。
|
||||
|
||||
When the router lazy loads a module, it creates a child injector and registers the `UserService`
|
||||
provider with that child injector. The child injector is _not_ the root injector.
|
||||
@ -1145,7 +1145,7 @@ the HTML, the binding instructions, the attached styles.
|
||||
Because directives and pipes appear in component templates,
|
||||
the Angular compiler incorporates them into compiled component code too.
|
||||
|
||||
由于**指令**和**管道**都出现在组件模板中,*Angular 编译器**也同样会把它们组合到编译成的组件代码中。
|
||||
由于**指令**和**管道**都出现在组件模板中,*Angular 编译器**也同样会把它们组合进编译后的组件代码中。
|
||||
|
||||
`@NgModule` metadata tells the Angular compiler what components to compile for this module and
|
||||
how to link this module with other modules.
|
||||
|
@ -84,13 +84,13 @@ The `dependencies` section of `package.json` contains:
|
||||
|
||||
*[*Angular 包**:Angular 的核心和可选模块,它们的包名以 `@angular/` 开头。
|
||||
|
||||
* **Support packages**](#support-packages): 3rd party libraries that must be present for Angular apps to run.
|
||||
* **[Support packages**](#support-packages): 3rd party libraries that must be present for Angular apps to run.
|
||||
|
||||
*[*支持包**:那些 Angular 应用运行时必需的第三方库。
|
||||
[**支持包**](#support-packages):那些 Angular 应用运行时必需的第三方库。
|
||||
|
||||
* **Polyfill packages**](#polyfills): Polyfills plug gaps in a browser's JavaScript implementation.
|
||||
* [**Polyfill packages**](#polyfills): Polyfills plug gaps in a browser's JavaScript implementation.
|
||||
|
||||
**腻子脚本**:腻子脚本负责抹平不同浏览器的 JavaScript 实现之间的差异。
|
||||
[**腻子脚本**](#polyfills):腻子脚本负责抹平不同浏览器的 JavaScript 实现之间的差异。
|
||||
|
||||
To add a new dependency, use the [`ng add`](cli/add) command.
|
||||
|
||||
|
@ -28,7 +28,7 @@ In fact, you might like to apply them in your HTML templates as you do styles.
|
||||
|
||||
Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.
|
||||
|
||||
通过引入 Angular 管道,你可以把这种简单的“显示-值”转换器声明在 HTML 中。
|
||||
通过引入 Angular 管道(一种编写"从显示到值"转换逻辑的途径),你可以把它声明在 HTML 中。
|
||||
|
||||
You can run the <live-example></live-example> in Stackblitz and download the code from there.
|
||||
|
||||
@ -143,7 +143,7 @@ As you click the button, the displayed date alternates between
|
||||
"**<samp>04/15/1988</samp>**" and
|
||||
"**<samp>Friday, April 15, 1988</samp>**".
|
||||
|
||||
当你点击按钮的时候,显示的日志会在“**<samp>04/15/1988</samp>**”和“**<samp>Friday, April 15, 1988</samp>**”之间切换。
|
||||
当你点击此按钮的时候,所显示的日期会在“**<samp>04/15/1988</samp>**”和“**<samp>Friday, April 15, 1988</samp>**”之间切换。
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle">
|
||||
|
@ -265,7 +265,7 @@ For more information about Angular project files and the file structure, see [Wo
|
||||
|
||||
Now that you've seen the essentials of an Angular app and the Angular CLI, continue with these other introductory materials:
|
||||
|
||||
现在,你已经了解了 Angular 和 Angular CLI 的基础知识,请访问下列章节以继续:
|
||||
现在,你已经了解了 Angular 和 Angular CLI 的基础知识,请继续访问下列介绍性材料:
|
||||
|
||||
* The [Tour of Heroes tutorial](tutorial "Tour of Heroes tutorial") provides additional hands-on learning. It walks you through the steps to build an app that helps a staffing agency manage a group of superhero employees.
|
||||
It has many of the features you'd expect to find in a data-driven application:
|
||||
|
@ -118,7 +118,7 @@ Disclaimer: The dates are offered as general guidance and may be adjusted by us
|
||||
|
||||
The following table contains our current target release dates for the next two major versions of Angular:
|
||||
|
||||
下表中包含下面两个 Angular 主版本的目标发布日期:
|
||||
下表中包含 Angular 接下来两个主版本的目标发布日期:
|
||||
|
||||
Date | Stable Release | Compatibility
|
||||
---------------------- | -------------- | -------------
|
||||
|
@ -1957,7 +1957,7 @@ you must import those routing modules [in the correct order](#routing-module-ord
|
||||
The application continues to work just the same, and you can use `AppRoutingModule` as
|
||||
the central place to maintain future routing configuration.
|
||||
|
||||
应用继续正常运行,你可以把路由模块作为为每个特性模块维护路由配置的中心地方。
|
||||
应用继续照常运行,你可以把路由模块作为将来每个模块维护路由配置的中心位置。
|
||||
|
||||
{@a why-routing-module}
|
||||
|
||||
@ -4010,7 +4010,7 @@ There are two noteworthy differences.
|
||||
|
||||
Note that the `send()` method simulates latency by waiting a second before "sending" the message and closing the popup.
|
||||
|
||||
主要 `send()` 方法在发送消息和关闭弹出框之前通过等待模拟了一秒钟的延迟。
|
||||
注意,`send()` 方法在发送消息和关闭弹出框之前通过等待模拟了一秒钟的延迟。
|
||||
|
||||
The `closePopup()` method closes the popup view by navigating to the popup outlet with a `null`.
|
||||
That's a peculiarity covered [below](#clear-secondary-routes).
|
||||
@ -4073,7 +4073,7 @@ You are in effect saying, _when the user clicks this link, display the component
|
||||
This `outlets` object within an outer object was completely unnecessary
|
||||
when there was only one route and one _unnamed_ outlet to think about.
|
||||
|
||||
当有且只有一个*无名*出口时,外部对象中的这个 `outlets` 对象并不是必须的。
|
||||
当只需要考虑一个路由和一个*无名*出口时,外部对象中的这个 `outlets` 对象是完全不必要的。
|
||||
|
||||
The router assumed that your route specification targeted the _unnamed_ primary outlet
|
||||
and created these objects for you.
|
||||
|
@ -145,7 +145,7 @@ Use the `retry` operator before the `catchError` operator. It resubscribes to th
|
||||
|
||||
The following converts the previous example to retry the request before catching the error:
|
||||
|
||||
下列代码为前面的例子加上了捕获错误前重发请求的逻辑:
|
||||
下列代码把前面的例子改成了在捕获错误之前重发请求:
|
||||
|
||||
<code-example path="rx-library/src/retry-on-error.ts" header="retry operator"></code-example>
|
||||
|
||||
|
@ -130,7 +130,7 @@ Angular 定义了四个安全环境 - HTML,样式,URL,和资源 URL:
|
||||
|
||||
* **Resource URL** is a URL that will be loaded and executed as code, for example, in `<script src>`.
|
||||
|
||||
**资源 URL**:值需要被当做代码而加载并执行时使用,比如 `<script src>` 中的 URL。
|
||||
**资源 URL**的值需要作为代码进行加载并执行,比如 `<script src>` 中的 URL。
|
||||
|
||||
Angular sanitizes untrusted values for HTML, styles, and URLs; sanitizing resource URLs isn't
|
||||
possible because they contain arbitrary code. In development mode, Angular prints a console warning
|
||||
@ -171,7 +171,7 @@ vulnerability. For example, code contained in a `<script>` tag is executed:
|
||||
Angular recognizes the value as unsafe and automatically sanitizes it, which removes the `<script>`
|
||||
tag but keeps safe content such as the `<b>` element.
|
||||
|
||||
Angular 认为这些值是不安全的,并自动进行无害化处理。它会移除 `<script>` 标签,但保留安全的内容,比如该片段中的文本内容或 `<b>` 元素。
|
||||
Angular 认为这些值是不安全的,并自动进行无害化处理。它会移除 `<script>` 标签,但保留安全的内容,比如该片段中的 `<b>` 元素。
|
||||
|
||||
<figure>
|
||||
<img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'>
|
||||
@ -422,7 +422,7 @@ well-known string `")]}',\n"`.
|
||||
Angular's `HttpClient` library recognizes this convention and automatically strips the string
|
||||
`")]}',\n"` from all responses before further parsing.
|
||||
|
||||
Angular 的 `Http` 库会识别这种约定,并在进一步解析之前,自动把字符串 `")]}',\n"` 从所有响应中去掉。
|
||||
Angular 的 `HttpClient` 库会识别这种约定,并在进一步解析之前,自动把字符串 `")]}',\n"` 从所有响应中去掉。
|
||||
|
||||
For more information, see the XSSI section of this [Google web security blog
|
||||
post](https://security.googleblog.com/2011/05/website-security-for-webmasters.html).
|
||||
|
@ -46,7 +46,7 @@ The `SwUpdate` service supports four separate operations:
|
||||
|
||||
* Asking the service worker to activate the latest version of the app for the current tab.
|
||||
|
||||
要求 Service Worker 为当前页面激活该应用的最新版本。
|
||||
要求 Service Worker 为当前标签页激活该应用的最新版本。
|
||||
|
||||
### Available and activated updates
|
||||
|
||||
@ -87,7 +87,7 @@ This method returns a `Promise` which indicates that the update check has comple
|
||||
|
||||
If the current tab needs to be updated to the latest app version immediately, it can ask to do so with the `activateUpdate()` method:
|
||||
|
||||
如果当前页需要立即更新到最新的应用版本,可以通过 `activateUpdate()` 方法来要求立即这么做:
|
||||
如果当前标签页需要立即更新到最新的应用版本,可以通过 `activateUpdate()` 方法来要求立即这么做:
|
||||
|
||||
<code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" linenums="false" header="prompt-update.service.ts" region="sw-activate"> </code-example>
|
||||
|
||||
|
@ -549,7 +549,7 @@ This script can be used both to deactivate `@angular/service-worker`
|
||||
as well as any other Service Workers which might have been served in
|
||||
the past on your site.
|
||||
|
||||
这个脚本可以用来停用 `@angular/service-worker` 以及任何其它以前在你的站点上提供过的 Service Worker。
|
||||
这个脚本可以用来停用 `@angular/service-worker` 以及任何其它曾在你的站点上提供过的 Service Worker。
|
||||
|
||||
## More on Angular service workers
|
||||
|
||||
|
@ -99,7 +99,7 @@ Because `ng serve` does not work with service workers, you must use a separate H
|
||||
|
||||
To serve the directory containing your web files with `http-server`, run the following command:
|
||||
|
||||
要想使用 `http-server` 服务器,进入包含这些 web 文件的目录,并启动开发服务器:
|
||||
要想使用 `http-server` 在包含这些 web 文件的目录上启动服务,运行下列命令:
|
||||
|
||||
```sh
|
||||
http-server -p 8080 -c-1 dist/<project-name>
|
||||
|
@ -192,7 +192,7 @@ injector, above me in the injector hierarchy."
|
||||
If the constructor executes as intended in the `AppModule`,
|
||||
there would be no ancestor injector that could provide an instance of `CoreModule` and the injector should give up.
|
||||
|
||||
如果构造函数在 `AppModule` 中执行,那就没有祖先注入器能提供 `CoreModule` 的实例,于是注入器就会放弃查找。
|
||||
如果构造函数如预期般在 `AppModule` 中执行,那就没有祖先注入器能提供 `CoreModule` 的实例,于是注入器就会放弃查找。
|
||||
|
||||
By default, the injector throws an error when it can't
|
||||
find a requested provider.
|
||||
|
@ -961,7 +961,7 @@ You learned
|
||||
|
||||
* to use [`<ng-container>`](guide/structural-directives#ngcontainer) as a grouping element when there is no suitable host element.
|
||||
|
||||
当没有合适的容器元素时,可以使用[`<ng-container>`](guide/structural-directives#ngcontainer)对元素进行分组。
|
||||
当没有合适的宿主元素时,可以使用[`<ng-container>`](guide/structural-directives#ngcontainer)对元素进行分组。
|
||||
|
||||
* that the Angular desugars [asterisk (*) syntax](guide/structural-directives#asterisk) into a `<ng-template>`.
|
||||
|
||||
|
@ -140,7 +140,7 @@ collisions with teams in source control.
|
||||
|
||||
The key is to make the code more reusable, easier to read, and less mistake prone.
|
||||
|
||||
最关键的是,可以增强代码可重用性和阅读性,减少出错的可能性。
|
||||
最关键的是,可以让代码更加可复用、更容易阅读,减少出错的可能性。
|
||||
|
||||
The following *negative* example defines the `AppComponent`, bootstraps the app,
|
||||
defines the `Hero` model object, and loads heroes from the server all in the same file.
|
||||
@ -259,7 +259,7 @@ As the app grows, this rule becomes even more important.
|
||||
|
||||
**Why?** Small functions help avoid hidden bugs that come with large functions that share variables with external scope, create unwanted closures, or unwanted coupling with dependencies.
|
||||
|
||||
**为何?**简单函数可避免易在大函数中产生的隐蔽性错误,例如与外界共享变量、创建意外的闭包或与依赖之间产生意外耦合等。
|
||||
**为何?**小函数可避免易在大函数中产生的隐蔽性错误,例如与外界共享变量、创建意外的闭包或与依赖之间产生意外耦合等。
|
||||
|
||||
</div>
|
||||
|
||||
@ -387,7 +387,7 @@ Invent additional type names if you must but take care not to create too many.
|
||||
|
||||
**Why?** Type names make it easy to find a specific file type using an editor or IDE's fuzzy search techniques.
|
||||
|
||||
**为何?** 利用编辑器或者 IDE 的模糊搜索功能,可以很容易地找到特定文件。
|
||||
**为何?** 类型名可以让你轻松利用编辑器或者 IDE 的模糊搜索功能找到特定文件类型。
|
||||
|
||||
</div>
|
||||
|
||||
@ -1138,7 +1138,7 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
|
||||
|
||||
**Why?** Provides a consistent way to quickly identify and reference pipes.
|
||||
|
||||
**为何?**提供一致方式快速识别和引用管道。
|
||||
**为何?**提供一致的方式快速识别和引用管道。
|
||||
|
||||
</div>
|
||||
|
||||
@ -3289,7 +3289,7 @@ Yet they're too big and messy to leave loose in the root folder.
|
||||
|
||||
**Why?** `CoreModule` exists to make commonly used singleton services available for use in the many other modules.
|
||||
|
||||
**为何?**`CoreModule` 的存在就让常用的单例服务在所有其它模块中可用。
|
||||
**为何?**`CoreModule` 的存在就要让常用的单例服务在所有其它模块中可用。
|
||||
|
||||
</div>
|
||||
|
||||
@ -4001,7 +4001,7 @@ helps instantly identify which members of the component serve which purpose.
|
||||
|
||||
**Why?** Removes dependencies and hides implementation details from the component.
|
||||
|
||||
**为何?**从组件移除依赖并隐藏实施细节。
|
||||
**为何?**从组件移除依赖并隐藏实现细节。
|
||||
|
||||
</div>
|
||||
|
||||
@ -4310,7 +4310,7 @@ Compare with the less preferred `host` metadata alternative.
|
||||
|
||||
**Do** create services with a single responsibility that is encapsulated by its context.
|
||||
|
||||
**坚持**创建单一职责的服务,用职责封装在它的上下文中。
|
||||
**坚持**创建封装在上下文中的单一职责的服务。
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -11,7 +11,7 @@
|
||||
The Angular application manages what the user sees and can do, achieving this through the interaction of a
|
||||
component class instance (the *component*) and its user-facing template.
|
||||
|
||||
Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(*组件*)和面向用户的模板来与用户交互。
|
||||
Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(*组件*)和面向用户的模板交互来实现这一点。
|
||||
|
||||
You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM).
|
||||
In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
|
||||
@ -1222,7 +1222,7 @@ Return an object if the target property expects an object.
|
||||
|
||||
The `hero` property of the `HeroDetail` component expects a `Hero` object, which is exactly what you're sending in the property binding:
|
||||
|
||||
`HeroDetail` 组件的 `hero` 属性想要一个 `Hero` 对象,那就在属性绑定中精确地给它一个 `Hero` 对象:
|
||||
`HeroDetail` 组件的 `hero` 属性想要一个 `Hero` 对象,也就是你在属性绑定时发给它的那个:
|
||||
|
||||
<code-example path="template-syntax/src/app/app.component.html" region="property-binding-4" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
@ -2012,7 +2012,7 @@ Adding an `ngClass` property binding to `currentClasses` sets the element's clas
|
||||
|
||||
It's up to you to call `setCurrentClasses()`, both initially and when the dependent properties change.
|
||||
|
||||
你既可以在初始化时调用 `setCurrentClassess()`,也可以在所依赖的属性变化时调用。
|
||||
你既可以在初始化时调用 `setCurrentClasses()`,也可以在所依赖的属性变化时调用。
|
||||
|
||||
</div>
|
||||
|
||||
@ -2055,7 +2055,7 @@ with an object that defines three styles, based on the state of three other comp
|
||||
|
||||
Adding an `ngStyle` property binding to `currentStyles` sets the element's styles accordingly:
|
||||
|
||||
把 `NgStyle` 属性绑定到 `currentStyles`,以据此设置此元素的样式:
|
||||
把 `ngStyle` 属性绑定到 `currentStyles`,来根据它设置此元素的样式:
|
||||
|
||||
<code-example path="template-syntax/src/app/app.component.html" region="NgStyle-2" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
@ -2386,7 +2386,7 @@ Here is an example of `NgForOf` applied to a simple `<div>`:
|
||||
|
||||
You can also apply an `NgForOf` to a component element, as in this example:
|
||||
|
||||
也可以把 `NgFor` 应用在一个组件元素上,就下例这样:
|
||||
也可以把 `NgForOf` 应用在一个组件元素上,就下例这样:
|
||||
|
||||
<code-example path="template-syntax/src/app/app.component.html" region="NgFor-2" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
@ -2760,7 +2760,7 @@ Values flow _out_ of the component as events bound with an [event binding](#even
|
||||
|
||||
You can only bind to _another_ component or directive through its _Input_ and _Output_ properties.
|
||||
|
||||
你只能通过它的**输入**和**输出**属性将其绑定到**其它**组件。
|
||||
你只能通过它的**输入**和**输出**属性将其绑定到**其它**组件或指令。
|
||||
|
||||
<div class="alert is-important">
|
||||
|
||||
@ -3160,7 +3160,7 @@ You could code around that problem with [*ngIf](guide/template-syntax#ngIf).
|
||||
You could try to chain parts of the property path with `&&`, knowing that the expression bails out
|
||||
when it encounters the first null.
|
||||
|
||||
或者可以尝试通过 `&&` 来把属性路径的各部分串起来,让它在遇到第一个空值的时候,就返回空。
|
||||
还可以尝试通过 `&&` 来把属性路径的各部分串起来,让它在遇到第一个空值的时候,就返回空。
|
||||
|
||||
<code-example path="template-syntax/src/app/app.component.html" region="safe-5" header="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
@ -714,7 +714,7 @@ While the _code sample_ accompanying this guide demonstrates `HttpClientTestingM
|
||||
this page defers to the [Http guide](guide/http#testing-http-requests),
|
||||
which covers testing with the `HttpClientTestingModule` in detail.
|
||||
|
||||
本章的*代码范例*要示范的是 `HttpClientTestingModule`,所以把部分内容移到了 [HttpClient 中](guide/http#testing-http-requests),那里会详细讲解如何用 `HttpClientTestingModule` 进行测试。
|
||||
本章的*代码范例*要示范的是 `HttpClientTestingModule`,所以把部分内容移到了 [Http](guide/http#testing-http-requests) 一章,那里会详细讲解如何用 `HttpClientTestingModule` 进行测试。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@ -774,7 +774,7 @@ Consider this `LightswitchComponent` which toggles a light on and off
|
||||
You might decide only to test that the `clicked()` method
|
||||
toggles the light's _on/off_ state and sets the message appropriately.
|
||||
|
||||
你可能要测试 `clicked()` 方法能否正确切换灯的开关状态。
|
||||
你可能要测试 `clicked()` 方法能否正确切换灯的开关状态并设置合适的消息。
|
||||
|
||||
This component class has no dependencies.
|
||||
To test a service with no dependencies, you create it with `new`, poke at its API,
|
||||
@ -845,7 +845,7 @@ You might start by creating a mock of the `UserService` that meets the minimum n
|
||||
|
||||
Then provide and inject _both the_ **component** _and the service_ in the `TestBed` configuration.
|
||||
|
||||
然后在 `TestBed` 的配置中提供并注入该**组件**和该**服务**。
|
||||
然后在 `TestBed` 的配置中提供并同时注入该**组件**和该**服务**。
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/welcome/welcome.component.spec.ts"
|
||||
@ -939,7 +939,7 @@ generate a new component.
|
||||
|
||||
For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder (with inline template and styles):
|
||||
|
||||
比如,下列 CLI 命令会在 `app/banner` 文件夹中创建带有内联模板和内联样式的 `BannerComponent`:
|
||||
比如,下列 CLI 命令会在 `app/banner` 文件夹中生成带有内联模板和内联样式的 `BannerComponent`:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate component banner --inline-template --inline-style --module app
|
||||
@ -1113,7 +1113,7 @@ The tests in this guide are designed to run in a browser so a
|
||||
`nativeElement` value will always be an `HTMLElement` or
|
||||
one of its derived classes.
|
||||
|
||||
本指南中的例子都是为运行在浏览器中而设计的,因此 `nativeElement` 的值一定会是 `HTMLElement` 及其派生类。
|
||||
本指南中的测试都是为运行在浏览器中而设计的,因此 `nativeElement` 的值一定会是 `HTMLElement` 或其派生类。
|
||||
|
||||
Knowing that it is an `HTMLElement` of some sort, you can use
|
||||
the standard HTML `querySelector` to dive deeper into the element tree.
|
||||
@ -1428,7 +1428,7 @@ Then add it to the `providers` array of the testing module configuration:
|
||||
|
||||
Here are three tests that illustrate how automatic change detection works.
|
||||
|
||||
下列测试阐明了自动变更检测的工作原理。
|
||||
这三个测试阐明了自动变更检测的工作原理。
|
||||
|
||||
<code-example path="testing/src/app/banner/banner.component.detect-changes.spec.ts" region="auto-detect-tests" header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect Tests)" linenums="false"></code-example>
|
||||
|
||||
@ -2789,7 +2789,7 @@ and it starts interacting with those services right away.
|
||||
Imagine the effort to disable these distractions, just to prove a point
|
||||
that can be made satisfactorily with a _test host_ like this one:
|
||||
|
||||
想出这么多需要努力排除的干扰,只是为了证明一点 —— 可以像这样造出一个令人满意的*测试宿主*:
|
||||
想出这么多需要努力排除的干扰,只是为了证明一点 —— 可以造出这样一个令人满意的*测试宿主*:
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/dashboard/dashboard-hero.component.spec.ts"
|
||||
@ -2919,7 +2919,7 @@ and care only if the component navigates with the right address under the given
|
||||
Providing a router spy for _this component_ test suite happens to be as easy
|
||||
as providing a `HeroService` spy.
|
||||
|
||||
为*这个组件*的测试套件提供路由器的间谍就像它提供 `HeroService` 的间谍一样简单。
|
||||
为*这个组件*的测试套件提供路由器的间谍就像提供 `HeroService` 的间谍一样简单。
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/dashboard/dashboard.component.spec.ts"
|
||||
@ -3460,7 +3460,7 @@ That's not the fault of the `AppComponent` and no change to that component could
|
||||
A _different_ battery of tests can explore whether the application navigates as expected
|
||||
in the presence of conditions that influence guards such as whether the user is authenticated and authorized.
|
||||
|
||||
不同的测试程序可以探索在不同条件下(比如像检查用户是否认证),该应用是否和期望的那样导航。
|
||||
一组不同的测试程序可以探索当存在影响守卫的条件时(比如用户是否已认证和授权),该应用是否如期望般导航。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@ -3544,7 +3544,7 @@ Now the important hooks for component manipulation and inspection are neatly org
|
||||
|
||||
A `createComponent` method creates a `page` object and fills in the blanks once the `hero` arrives.
|
||||
|
||||
`createComponent` 方法创建 `page`,在 `hero` 到来时,自动填补空白。
|
||||
`createComponent` 方法会创建一个 `page` 对象,并在 `hero` 到来时自动填补空白。
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/hero/hero-detail.component.spec.ts"
|
||||
@ -3600,7 +3600,7 @@ The root of the problem is at least one of the components involved in the test
|
||||
specifies an external template or CSS file as
|
||||
the following version of the `BannerComponent` does.
|
||||
|
||||
问题的根源在于这个测试中至少有一个组件引用了外部模板或外部 CSS 文件,就像下面这个 `BannerComponent` 所示:
|
||||
问题的根源在于这个测试中至少有一个组件引用了外部模板或外部 CSS 文件,就像下面这个版本的 `BannerComponent` 所示:
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/banner/banner-external.component.ts"
|
||||
@ -3700,7 +3700,7 @@ Write the first async `beforeEach` like this.
|
||||
|
||||
The `async()` helper function takes a parameterless function with the body of the setup.
|
||||
|
||||
`async()` 辅助函数接受一个无参函数,其内容是准备代码。
|
||||
`async()` 辅助函数接受一个无参函数,其内容是环境准备代码。
|
||||
|
||||
The `TestBed.configureTestingModule()` method returns the `TestBed` class so you can chain
|
||||
calls to other `TestBed` static methods such as `compileComponents()`.
|
||||
@ -3854,7 +3854,7 @@ In addition to the support it receives from the default testing module `CommonMo
|
||||
|
||||
One approach is to configure the testing module from the individual pieces as in this example:
|
||||
|
||||
一种方法是在测试模块中一一配置,就像这样:
|
||||
一种方法是从各个部分配置测试模块,就像这样:
|
||||
|
||||
<code-example
|
||||
path="testing/src/app/hero/hero-detail.component.spec.ts"
|
||||
@ -4087,7 +4087,7 @@ Accordingly, the stub implements its methods as spies:
|
||||
Now the tests can control the component's hero directly by manipulating the spy-stub's `testHero`
|
||||
and confirm that service methods were called.
|
||||
|
||||
现在,测试程序可以通过操控 stub 的 `testHero`,直接控制组件的英雄,并确保服务的方法被调用过。
|
||||
现在,测试程序可以通过操控这个 spy-stub 的 `testHero`,直接控制组件的英雄,并确认那个服务方法被调用过。
|
||||
|
||||
<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="override-tests" header="app/hero/hero-detail.component.spec.ts (override tests)" linenums="false"></code-example>
|
||||
|
||||
@ -4291,7 +4291,7 @@ Debug specs in the browser in the same way that you debug an application.
|
||||
|
||||
1. Open the browser's “Developer Tools” (`Ctrl-Shift-I` on windows; `Command-Option-I` in OSX).
|
||||
|
||||
打开浏览器的“Developer Tools”(Windows 上的 Ctrl-Shift-I 或者 OSX 上的 `Command-Option-I)。
|
||||
打开浏览器的“Developer Tools”(Windows 上的 Ctrl-Shift-I 或者 OSX 上的 Command-Option-I)。
|
||||
|
||||
1. Pick the "sources" section.
|
||||
|
||||
@ -4613,7 +4613,7 @@ which is also returned by the `getTestBed()` function.
|
||||
|
||||
Call `TestBed` methods _within_ a `beforeEach()` to ensure a fresh start before each individual test.
|
||||
|
||||
在 `BeforeEach()` 内调用 `TestBed` 方法,这样确保在运行每个单独测试时,都有崭新的开始。
|
||||
在 `BeforeEach()` 内调用 `TestBed` 方法,以确保在运行每个单独测试时,都有崭新的开始。
|
||||
|
||||
Here are the most important static methods, in order of likely utility.
|
||||
|
||||
@ -5105,7 +5105,7 @@ Here are the most useful methods for testers.
|
||||
|
||||
Set this to `true` when you want the fixture to detect changes automatically.
|
||||
|
||||
设置 fixture 是否应该自动试图检测变化。
|
||||
如果你希望这个夹具自动检测变更,就把这个设置为 `true`。
|
||||
|
||||
When autodetect is `true`, the test fixture calls `detectChanges` immediately
|
||||
after creating the component. Then it listens for pertinent zone events
|
||||
@ -5277,7 +5277,7 @@ Here are the most useful `DebugElement` members for testers, in approximate orde
|
||||
Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement`
|
||||
that matches the [predicate](#query-predicate) at any depth in the subtree.
|
||||
|
||||
调用 `query(predicate: Predicate<DebugElement>)` 会在子树的任意深度中查找能和[谓词函数](#query-predicate)匹配的第一个 `DebugElement`。
|
||||
调用 `query(predicate: Predicate<DebugElement>)` 会在子树的任意深度中查找并返回能和[谓词函数](#query-predicate)匹配的第一个 `DebugElement`。
|
||||
|
||||
</td>
|
||||
|
||||
|
@ -424,7 +424,7 @@ Here's an example of using keyframes to create a pulse effect:
|
||||
|
||||
* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second
|
||||
|
||||
原始的 `open` 和 `closed` 状态会从其原始的高度、颜色和透明度开始,在一秒钟内逐渐发生变化。
|
||||
原始的 `open` 和 `closed` 状态(包括其原始的高度、颜色和透明度)会在一秒钟内逐渐发生变化。
|
||||
|
||||
* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe
|
||||
|
||||
@ -479,7 +479,7 @@ Sometimes you don't know the value of a dimensional style property until runtime
|
||||
|
||||
In these cases, you can use a special wildcard `*` property value under `style()`, so that the value of that particular style property is computed at runtime and then plugged into the animation.
|
||||
|
||||
这种情况下,你可以在 `style()` 中指定通配符 `*` 属性,以便在运行期间计算该属性的值,然后把它插入到动画中。
|
||||
这些情况下,你可以在 `style()` 中指定通配符 `*` 属性,以便在运行期间计算该属性的值,然后把它插入到动画中。
|
||||
|
||||
In this example, we have a trigger called `shrinkOut`, used when an HTML element leaves the page. The animation takes whatever height the element has before it leaves, and animates from that height to zero.
|
||||
|
||||
|
@ -195,7 +195,7 @@ Each request results in the appropriate view for the requested route.
|
||||
The `renderModuleFactory()` function renders the view within the `<app>` tag of the template,
|
||||
creating a finished HTML page for the client.
|
||||
|
||||
`renderModuleFactory()` 在模板中的 `<app>` 标记中渲染出哪个视图,并为客户端创建一个完成的 HTML 页面。
|
||||
`renderModuleFactory()` 在模板中的 `<app>` 标记中渲染出这个视图,并为客户端创建一个完成的 HTML 页面。
|
||||
|
||||
Finally, the server returns the rendered page to the client.
|
||||
|
||||
@ -674,7 +674,7 @@ npm run build:ssr && npm run serve:ssr
|
||||
|
||||
Because a Universal `platform-server` app doesn't execute in the browser, you may have to work around some of the browser APIs and capabilities that are missing on the server.
|
||||
|
||||
由于 Universal 的 `platform-server` 应用并没有运行在浏览器中,因此那些与浏览器 API 有关的工作都没法在这个服务器中使用。
|
||||
由于 Universal 的 `platform-server` 应用并没有运行在浏览器中,因此你不得不在该服务器中缺少某些浏览器 API 和能力的情况下工作。
|
||||
|
||||
|
||||
For example, your server-side page can't reference browser-only native objects such as `window`, `document`, `navigator`, or `location`.
|
||||
|
@ -306,7 +306,7 @@ AngularJS 1.5 引入了[组件 API](https://docs.angularjs.org/api/ng/type/angul
|
||||
The component directive example from above looks like this when expressed
|
||||
using the component API:
|
||||
|
||||
如果使用这个组件 API 进行快捷定义,那么上面看到的组件型指令就变成了这样:
|
||||
如果使用这个组件 API 进行表示,那么上面看到的组件型指令就变成了这样:
|
||||
|
||||
<code-example path="upgrade-module/src/app/upgrade-io/hero-detail.component.ts" region="hero-detail-io" header="hero-detail.component.ts">
|
||||
</code-example>
|
||||
|
@ -6,7 +6,7 @@
|
||||
|
||||
Some developers prefer Visual Studio as their Integrated Development Environment (IDE).
|
||||
|
||||
有些开发者喜欢用 Visual Studio。
|
||||
有些开发者喜欢用 Visual Studio 作为他们的集成开发环境。
|
||||
|
||||
This cookbook describes the steps required to set up and use the
|
||||
Angular [Getting Started](guide/quickstart) files in Visual Studio 2015 within an ASP.NET 4.x project.
|
||||
@ -91,7 +91,7 @@ Configure Visual Studio to use the global external web tools instead of the tool
|
||||
|
||||
* In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
|
||||
|
||||
在左边树型项目中,选择 `Projects and Solutions` | `External Web Tools`。
|
||||
在左边的树中,选择 `Projects and Solutions` | `External Web Tools`。
|
||||
|
||||
* On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
|
||||
use the external tools (such as npm) found in the global path before using its own version of the external tools.
|
||||
|
Loading…
x
Reference in New Issue
Block a user