diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index ba038fbd11..1ab82e792e 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -1,6 +1,6 @@ -# AngularJS to Angular Quick Reference +# AngularJS to Angular Concepts: Quick Reference -# 从 AngularJS 到 Angular 快速参考 +# 关于AngularJS 与 Angular 概念的快速参考 {@a top} @@ -1576,10 +1576,10 @@ 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. + With the Angular CLI, you can configure your global styles in the `angular.json` file. You can rename the extension to `.scss` to use sass. - 使用 Angular CLI，你可以在 `.angular-cli.json` 文件中配置全局样式。 + 使用 Angular CLI，你可以在 `angular.json` 文件中配置全局样式。 也可以把扩展名改为 `.scss` 来使用 sass。 ### StyleUrls diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index 1da52a6fe4..3594b9f1a2 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -166,7 +166,7 @@ The option is `false` by default. 这个选项告诉编译器不要生成 `.metadata.json` 文件，它默认是 `false`。 -`.metadata.json` files contain infomration needed by the template compiler from a `.ts` +`.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. @@ -189,10 +189,10 @@ include a copy of the information that is in the `.metadata.json` file. ### *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`. +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` 时才应该使用这个选项。 +只有当 `"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. @@ -303,10 +303,10 @@ This option should be set to `false` when using factory summaries. ### *fullTemplateTypeCheck* -This option tells the compiler to enable the [binding expression validation](#binding-expresion-validation) +This option tells the compiler to enable the [binding expression validation](#binding-expression-validation) phase of the template compiler which uses TypeScript to validate binding expressions. -该选项告诉编译器要为模板编译器启用[绑定表达式验证](#binding-expresion-validation)阶段，它会使用 TypeScript 来验证绑定表达式。 +该选项告诉编译器要为模板编译器启用[绑定表达式验证](#binding-expression-validation)阶段，它会使用 TypeScript 来验证绑定表达式。 This option is `false` by default. @@ -608,7 +608,7 @@ export function serverFactory() { ``` -Beginning in version 5, the compiler automatically performs this rewritting while emitting the `.js` file. +Beginning in version 5, the compiler automatically performs this rewriting while emitting the `.js` file. 从 Angular v5 开始，编译器会在生成 `.js` 文件时自动执行这种改写。 @@ -996,7 +996,7 @@ The following are metadata errors you may encounter, with explanations and sugge

不支持这种表达式格式

-The compiler encountered an expression it didn't understand while evalutating Angular metadata. +The compiler encountered an expression it didn't understand while evaluating Angular metadata. 编译器在对 Angular 元数据求值时遇到了一个它不能理解的表达式。 @@ -1457,7 +1457,7 @@ The compiler encountered a type and can't determine which module exports that ty 编译器遇到了某个类型，但是不知道它是由哪个模块导出的。 This can happen if you refer to an ambient type. -For example, the `Window` type is an ambiant type declared in the global `.d.ts` file. +For example, the `Window` type is an ambient type declared in the global `.d.ts` file. 这通常会发生在你引用环境类型时。 比如，`Window` 类型就是在全局 `.d.ts` 文件中声明的环境类型。 @@ -1477,7 +1477,7 @@ export class MyComponent { ``` -TypeScript understands ambiant types so you don't import them. +TypeScript understands ambient types so you don't import them. The Angular compiler does not understand a type that you neglect to export or import. TypeScript 能理解这些环境类型，所以你不用导入它们。 @@ -1491,12 +1491,12 @@ Do not refer to ambient types in metadata expressions. 不要在元数据表达式中引用环境类型。 -If you must inject an instance of an ambiant type, +If you must inject an instance of an ambient type, you can finesse the problem in four steps: 如果你必须注入某个环境类型的实例，可以用以下四步来巧妙解决这个问题： -1. Create an injection token for an instance of the ambiant type. +1. Create an injection token for an instance of the ambient type. 为环境类型的实例创建一个注入令牌。 @@ -1676,14 +1676,14 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there]( --> -{@a binding-expresion-validation} +{@a binding-expression-validation} ## Phase 3: binding expression validation ## 阶段 3：验证绑定表达式 In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the - binding expressions in templates. Enable this phase explicity by adding the compiler + binding expressions in templates. Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see [Angular Compiler Options](#compiler-options)). @@ -1726,7 +1726,7 @@ Chuck: After reviewing your PR comment I'm still at a loss. See [comment there]( generated by the template compiler that holds contents of the `MyComponent` class template. Compiler never writes this file to disk. The line and column numbers are relative to the template string in the `@Component` annotation of the class, `MyComponent` in this case. If a component uses - `templateUrl` instead of `template`, the errors are reported in the HTML file refereneced by the + `templateUrl` instead of `template`, the errors are reported in the HTML file referenced by the `templateUrl` instead of a synthetic file. 错误信息中汇报的文件名 `my.component.ts.MyComponent.html` 是一个由模板编译器生成出的虚拟文件， diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md index 83928fddb7..e3df63df57 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -45,7 +45,7 @@ Angular creates, updates, and destroys components as the user moves through the Metadata -The `@Component` decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that `HeroListComponent` is just a class, with no special Angular notation or syntax at all. It's not a component until mark it as one with the `@Component` decorator. +The `@Component` decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that `HeroListComponent` is just a class, with no special Angular notation or syntax at all. It's not a component until you mark it as one with the `@Component` decorator. `@Component` 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。 在下面的范例代码中，你可以看到 `HeroListComponent` 只是一个普通类，完全没有 Angular 特有的标记或语法。 @@ -74,19 +74,19 @@ In addition to containing or pointing to the template, the `@Component` metadata * `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains ``, then Angular inserts an instance of the `HeroListComponent` view between those tags. - `selector`：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 + `selector`：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 比如，如果应用的 HTML 中包含 ``，Angular 就会在这些标签中插入一个 `HeroListComponent` 实例的视图。 * `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's _host view_. - `templateUrl`：该组件的 HTML 模板文件相对于这个组件文件的地址。 + `templateUrl`：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用 `template` 属性的值来提供内联的 HTML 模板。 这个模板定义了该组件的*宿主视图*。 * `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular that the component's constructor requires a `HeroService` instance in order to get the list of heroes to display. - `providers` 是当前组件所需的**依赖注入提供商**的一个数组。在这个例子中，它告诉 Angular，该组件的构造函数需要一个 `HeroService` 实例，以获取要显示的英雄列表。 + `providers` 是当前组件所需的**依赖注入提供商**的一个数组。在这个例子中，它告诉 Angular，该组件的构造函数需要一个 `HeroService` 实例，以获取要显示的英雄列表。
@@ -134,15 +134,15 @@ This template uses typical HTML elements like `

` and `

`, and also includ * The `*ngFor` directive tells Angular to iterate over a list. - `*ngFor` 指令告诉 Angular 在一个列表上进行迭代。 + `*ngFor` 指令告诉 Angular 在一个列表上进行迭代。 * The `{{hero.name}}`, `(click)`, and `[hero]` bind program data to and from the DOM, responding to user input. See more about [data binding](#data-binding) below. - `{{hero.name}}`、`(click)` 和 `[hero]` 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参见稍后的[数据绑定](#data-binding)部分。 + `{{hero.name}}`、`(click)` 和 `[hero]` 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参见稍后的[数据绑定](#data-binding)部分。 * The `` tag in the example is an element that represents a new component, `HeroDetailComponent`. The `HeroDetailComponent` (code not shown) is a child component of the `HeroListComponent` that defines the Hero-detail view. Notice how custom components like this mix seamlessly with native HTML in the same layouts. - 模板中的 `` 标签是一个代表新组件 `HeroDetailComponent` 的元素。 + 模板中的 `` 标签是一个代表新组件 `HeroDetailComponent` 的元素。 `HeroDetailComponent`（代码略）是 `HeroListComponent` 的一个子组件，它定义了英雄详情视图。 注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。 @@ -155,7 +155,7 @@ Without a framework, you would be responsible for pushing data values into the H 如果没有框架，你就要自己负责把数据值推送到 HTML 控件中，并把来自用户的响应转换成动作和对值的更新。 手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 用过 jQuery 的程序员一定深有体会。 -Angular supports *two-way data binding*, 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 supports *two-way data binding*, 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 该如何连接它们。 @@ -186,7 +186,7 @@ the parent `HeroListComponent` to the `hero` property of the child `HeroDetailCo * The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name. - 当用户点击某个英雄的名字时，`(click)` [*事件绑定*](guide/user-input#binding-to-user-input-events)会调用组件的 `selectHero` 方法。 + 当用户点击某个英雄的名字时，`(click)` [*事件绑定*](guide/user-input#binding-to-user-input-events)会调用组件的 `selectHero` 方法。 **Two-way data binding** is an important fourth form that combines property and event binding in a single notation. Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive: @@ -292,11 +292,11 @@ Structural directives alter layout by adding, removing, and replacing elements i * [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `

  • ` per hero in the `heroes` list. - [`*ngFor`](guide/displaying-data#ngFor) 是一个迭代器，它要求 Angular 为 `heroes` 列表中的每个 `
  • ` 渲染出一个 `
  • `。 + [`*ngFor`](guide/displaying-data#ngFor) 是一个迭代器，它要求 Angular 为 `heroes` 列表中的每个 `
  • ` 渲染出一个 `
  • `。 * [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists. - [`*ngIf`](guide/displaying-data#ngIf) 是个条件语句，只有当选中的英雄存在时，它才会包含 `HeroDetail` 组件。 + [`*ngIf`](guide/displaying-data#ngIf) 是个条件语句，只有当选中的英雄存在时，它才会包含 `HeroDetail` 组件。 #### Attribute directives diff --git a/aio/content/guide/architecture-modules.md b/aio/content/guide/architecture-modules.md index 13eb74b055..631ad1f878 100644 --- a/aio/content/guide/architecture-modules.md +++ b/aio/content/guide/architecture-modules.md @@ -29,24 +29,24 @@ NgModule 是一个带有 `@NgModule` 装饰器的类。`@NgModule` 装饰器是 * `declarations`—The [components](guide/architecture-components), _directives_, and _pipes_ that belong to this NgModule. - `declarations`（可声明对象表） —— 那些属于本 NgModule 的[组件](guide/architecture-components)、*指令*、*管道*。 + `declarations`（可声明对象表） —— 那些属于本 NgModule 的[组件](guide/architecture-components)、*指令*、*管道*。 * `exports`—The subset of declarations that should be visible and usable in the _component templates_ of other NgModules. - `exports`（导出表） —— 那些能在其它模块的*组件模板*中使用的可声明对象的子集。 + `exports`（导出表） —— 那些能在其它模块的*组件模板*中使用的可声明对象的子集。 * `imports`—Other modules whose exported classes are needed by component templates declared in _this_ NgModule. - `imports`（导入表） —— 那些导出了*本*模块中的组件模板所需的类的其它模块。 + `imports`（导入表） —— 那些导出了*本*模块中的组件模板所需的类的其它模块。 * `providers`—Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.) - `providers` —— 本模块向全局服务中贡献的那些[服务](guide/architecture-services)的创建器。 + `providers` —— 本模块向全局服务中贡献的那些[服务](guide/architecture-services)的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。） * `bootstrap`—The main application view, called the _root component_, which hosts all other app views. Only the _root NgModule_ should set this `bootstrap` property. - `bootstrap` —— 应用的主视图，称为*根组件*。它是应用中所有其它视图的宿主。只有*根模块*才应该设置这个 `bootstrap` 属性。 + `bootstrap` —— 应用的主视图，称为*根组件*。它是应用中所有其它视图的宿主。只有*根模块*才应该设置这个 `bootstrap` 属性。 Here's a simple root NgModule definition: diff --git a/aio/content/guide/architecture-next-steps.md b/aio/content/guide/architecture-next-steps.md index 10fdf1666b..ad9a31e03f 100644 --- a/aio/content/guide/architecture-next-steps.md +++ b/aio/content/guide/architecture-next-steps.md @@ -13,11 +13,11 @@ Angular 提供了本文档中所包含的很多特性和服务。 * [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces. - [生命周期钩子](guide/lifecycle-hooks)：通过实现生命周期钩子接口，可以窃听组件生命周期中的一些关键时刻 —— 从创建到销毁。 + [生命周期钩子](guide/lifecycle-hooks)：通过实现生命周期钩子接口，可以窃听组件生命周期中的一些关键时刻 —— 从创建到销毁。 * [Observables and event processing](guide/observables): How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results. - [可观察对象（Observable）和事件处理](guide/observables)：如何在组件和服务中使用可观察对象来发布和订阅任意类型的消息，比如用户交互事件和异步操作结果。 + [可观察对象（Observable）和事件处理](guide/observables)：如何在组件和服务中使用可观察对象来发布和订阅任意类型的消息，比如用户交互事件和异步操作结果。 #### Client-server interaction tools @@ -25,16 +25,16 @@ Angular 提供了本文档中所包含的很多特性和服务。 * [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. - [HTTP](guide/http)：用 HTTP 客户端与服务器通讯，以获取数据、保存数据或执行服务端动作。 + [HTTP](guide/http)：用 HTTP 客户端与服务器通讯，以获取数据、保存数据或执行服务端动作。 * [Server-side Rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers. - [服务端渲染](guide/universal)：Angular Universal 会通过服务端渲染（SSR）技术在服务器上生成静态的应用页面。 + [服务端渲染](guide/universal)：Angular Universal 会通过服务端渲染（SSR）技术在服务器上生成静态的应用页面。 这让你可以在服务器上运行 Angular 应用，以提升性能并在手机或低功耗设备上快速显示首屏，并为 Web 爬虫提供帮助（SEO）。 * [Service Workers](guide/service-worker-intro): A service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept outgoing HTTP requests and can, for example, deliver a cached response if one is available. You can significantly improve the user experience by using a service worker to reduce dependency on the network. - [Service Worker](guide/service-worker-intro)：Service Worker 是一个运行在浏览器中并为应用管理缓存的脚本。 + [Service Worker](guide/service-worker-intro)：Service Worker 是一个运行在浏览器中并为应用管理缓存的脚本。 Service Worker 的功能类似于网络代理。它们会拦截发出的 HTTP 请求，如果存在已缓存的响应，则直接返回它。通过使用 Service Worker 来减轻对网络的依赖，你可以显著提升用户体验。 #### Domain-specific libraries @@ -44,11 +44,11 @@ Angular 提供了本文档中所包含的很多特性和服务。 * [Animations](guide/animations): Animate component behavior without deep knowledge of animation techniques or CSS with Angular's animation library. - [动画](guide/animations)：使用 Angular 的动画库，你可以让组件支持动画行为，而不用深入了解动画技术或 CSS。 + [动画](guide/animations)：使用 Angular 的动画库，你可以让组件支持动画行为，而不用深入了解动画技术或 CSS。 * [Forms](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking. - [Forms](guide/forms)：通过基于 HTML 的验证和脏数据检查，来支持复杂的数据输入场景。 + [Forms](guide/forms)：通过基于 HTML 的验证和脏数据检查，来支持复杂的数据输入场景。 #### Support for the development cycle @@ -56,19 +56,19 @@ without deep knowledge of animation techniques or CSS with Angular's animation l * [Testing Platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework. - [测试平台](guide/testing)：对应用的各个部件运行单元测试，让它们好像在和 Angular 框架交互一样。 + [测试平台](guide/testing)：对应用的各个部件运行单元测试，让它们好像在和 Angular 框架交互一样。 * [Internationalization](guide/i18n): Angular's internationalization (i18n) tools can help you make your app available in multiple languages. - [国际化](guide/i18n)：Angular 的国际化工具可以帮助你让应用可用于多种语言中。 + [国际化](guide/i18n)：Angular 的国际化工具可以帮助你让应用可用于多种语言中。 * [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment. - [编译](guide/aot-compiler)：Angular 为开发环境提供了 JIT（即时）编译方式，为生产环境提供了 AOT（预先）编译方式。 + [编译](guide/aot-compiler)：Angular 为开发环境提供了 JIT（即时）编译方式，为生产环境提供了 AOT（预先）编译方式。 * [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks. - [安全指南](guide/security)：学习 Angular 对常见 Web 应用的弱点和工具（比如跨站脚本攻击）提供的内置防护措施。 + [安全指南](guide/security)：学习 Angular 对常见 Web 应用的弱点和工具（比如跨站脚本攻击）提供的内置防护措施。 #### Setup and deployment tools @@ -76,22 +76,22 @@ without deep knowledge of animation techniques or CSS with Angular's animation l * [Setup for local development](guide/setup): Learn how to set up a new project for development with QuickStart. - [搭建本地开发环境](guide/setup)：学习如何搭建用来开发《快速起步》的新项目。 + [搭建本地开发环境](guide/setup)：学习如何搭建用来开发《快速起步》的新项目。 * [Installation](guide/npm-packages): The [Angular CLI](https://cli.angular.io/), Angular applications, and Angular itself depend on features and functionality provided by libraries that are available as [npm](https://docs.npmjs.com/) packages. - [安装](guide/npm-packages)：[Angular CLI](https://cli.angular.io/) 应用和 Angular 本身依赖于一些由库提供的特性和功能，这些库都是以 [npm](https://docs.npmjs.com/) 包的形式发布的。 + [安装](guide/npm-packages)：[Angular CLI](https://cli.angular.io/) 应用和 Angular 本身依赖于一些由库提供的特性和功能，这些库都是以 [npm](https://docs.npmjs.com/) 包的形式发布的。 * [Typescript Configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development. - [TypeScript 配置](guide/typescript-configuration)：TypeScript 是 Angular 应用开发的主要语言。 + [TypeScript 配置](guide/typescript-configuration)：TypeScript 是 Angular 应用开发的主要语言。 * [Browser support](guide/browser-support): Learn how to make your apps compatible across a wide range of browsers. - [浏览器支持](guide/browser-support)：学习如何让你的应用能和各种浏览器兼容。 + [浏览器支持](guide/browser-support)：学习如何让你的应用能和各种浏览器兼容。 * [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server. - [发布](guide/deployment)：学习把你的应用发布到远端服务器的技巧。 + [发布](guide/deployment)：学习把你的应用发布到远端服务器的技巧。
    diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md index 6d5c799a15..3f1084e96d 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -16,13 +16,13 @@ Angular 把组件和服务区分开，以提高模块性和复用性。 * By separating a component's view-related functionality from other kinds of processing, you can make your component classes lean and efficient. Ideally, a component's job is to enable the user experience and nothing more. It should present properties and methods for data binding, in order to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a _model_). - 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。 + 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。 理想情况下，组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些模型的概念）的中介者。 * A component should not need to define things like how to fetch data from the server, validate user input, or log directly to the console. Instead, it can delegate such tasks to services. By defining that kind of processing task in an injectable service class, you make it available to any component. You can also make your app more adaptable by injecting different providers of the same kind of service, as appropriate in different circumstances. - 组件不应该定义任何诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作。 + 组件不应该定义任何诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作。 而要把这些任务委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它可以被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供商，你还可以让你的应用更具适应性。 @@ -74,15 +74,15 @@ Similarly, use the `@Injectable` decorator to indicate that a component or other * The *injector* is the main mechanism. You don't have to create an Angular injector. Angular creates an application-wide injector for you during the bootstrap process. - *注入器*是主要的机制。你不用自己创建 Angular 注入器。Angular 会在启动过程中为你创建全应用级注入器。 + *注入器*是主要的机制。你不用自己创建 Angular 注入器。Angular 会在启动过程中为你创建全应用级注入器。 * The injector maintains a *container* of dependency instances that it has already created, and reuses them if possible. - 该注入器维护一个包含它已创建的依赖实例的*容器*，并尽可能复用它们。 + 该注入器维护一个包含它已创建的依赖实例的*容器*，并尽可能复用它们。 * A *provider* is a recipe for creating a dependency. For a service, this is typically the service class itself. For any dependency you need in your app, you must register a provider with the app's injector, so that the injector can use it to create new instances. - *提供商*是一个创建依赖的菜谱。对于服务来说，它通常就是这个服务类本身。你在应用中要用到的任何类都必须使用该应用的注入器注册一个提供商，以便注入器可以使用它来创建新实例。 + *提供商*是一个创建依赖的菜谱。对于服务来说，它通常就是这个服务类本身。你在应用中要用到的任何类都必须使用该应用的注入器注册一个提供商，以便注入器可以使用它来创建新实例。 When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the types of its constructor parameters. For example, the constructor of `HeroListComponent` needs a `HeroService`: @@ -117,14 +117,14 @@ You must register at least one *provider* of any service you are going to use. Y * When you add providers to the [root module](guide/architecture-modules), the same instance of a service is available to all components in your app. - 当你往[根模块](guide/architecture-modules)中添加服务提供商时，服务的同一个实例会服务于你应用中的所有组件。 + 当你往[根模块](guide/architecture-modules)中添加服务提供商时，服务的同一个实例会服务于你应用中的所有组件。 * When you register a provider at the component level, you get a new instance of the service with each new instance of that component. At the component level, register a service provider in the `providers` property of the `@Component` metadata: - 当你在组件级注册提供商时，你会为该组件的每一个新实例提供该服务的一个新实例。 + 当你在组件级注册提供商时，你会为该组件的每一个新实例提供该服务的一个新实例。 要在组件级注册，就要在 `@Component` 元数据的 `providers` 属性中注册服务提供商。 diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 4fb1a08c71..ee410ef4db 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -16,12 +16,12 @@ NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是 * Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Every app has at least a root component. - 组件定义*视图*。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 + 组件定义*视图*。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 每个应用都至少有一个根组件。 * Components use *services*, which provide specific functionality not directly related to views. Service providers can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient. - 组件使用*服务*。服务会提供那些与视图不直接相关的功能。服务提供商可以作为*依赖*被*注入*到组件中， + 组件使用*服务*。服务会提供那些与视图不直接相关的功能。服务提供商可以作为*依赖*被*注入*到组件中， 这能让你的代码更加模块化、可复用，而且高效。 Both components and services are simply classes, with *decorators* that mark their type and provide metadata that tells Angular how to use them. @@ -30,12 +30,12 @@ Both components and services are simply classes, with *decorators* that mark the * The metadata for a component class associates it with a *template* that defines a view. A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display. - 组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。 + 组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。 模板把普通的 HTML 和*指令*与*绑定标记（markup）*组合起来，这样 Angular 就可以在呈现 HTML 之前先修改这些 HTML。 * The metadata for a service class provides the information Angular needs to make it available to components through *Dependency Injection (DI)*. - 服务的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。 + 服务的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。 An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities. @@ -95,7 +95,7 @@ The `@Component` decorator identifies the class immediately below it as a compon 装饰器是一些用于修饰 JavaScript 类的函数。Angular 定义了许多装饰器，这些装饰器会把一些特定种类的元数据附加到类上，以便 Angular 了解这些这些类的含义以及该如何使用它们。 Learn more about decorators on the web. - + 到网上学习关于装饰器的更多知识。 @@ -112,11 +112,11 @@ Template *directives* provide program logic, and *binding markup* connects your * *Event binding* lets your app respond to user input in the target environment by updating your application data. - *事件绑定*让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。 + *事件绑定*让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。 * *Property binding* lets you interpolate values that are computed from your application data into the HTML. - *属性绑定*让你将从应用数据中计算出来的值插入到 HTML 中。 + *属性绑定*让你将从应用数据中计算出来的值插入到 HTML 中。 Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports *two-way data binding*, meaning that changes in the DOM, such as user choices, can also be reflected back into your program data. @@ -131,7 +131,7 @@ Angular 为一些通用的转换提供了预定义管道，你还可以定义自
    For a more detailed discussion of these concepts, see [Introduction to components](guide/architecture-components). - + 要了解对这些概念的深入讨论，参见[组件介绍](guide/architecture-components)。
    @@ -154,7 +154,7 @@ For data or logic that is not associated with a specific view, and that you want
    For a more detailed discusssion, see [Introduction to services and DI](guide/architecture-services). - + 更深入的讨论，参见[服务和 DI 简介](guide/architecture-services)。
    @@ -204,7 +204,7 @@ To define navigation rules, you associate *navigation paths* with your component
    For a more detailed discussion, see [Routing and navigation](guide/router). - + 更深入的讨论，参见[路由与导航](guide/router)。
    @@ -226,19 +226,19 @@ You've learned the basics about the main building blocks of an Angular applicati * Together, a component and template define an Angular view. - 组件和模板共同定义了 Angular 的视图。 + 组件和模板共同定义了 Angular 的视图。 * A decorator on a component class adds the metadata, including a pointer to the associated template. - 组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。 + 组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。 * Directives and binding markup in a component's template modify views based on program data and logic. - 组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。 + 组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。 * The dependency injector provides services to a component, such as the router service that lets you define navigation among views. - 依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。 + 依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。 Each of these subjects is introduced in more detail in the following pages. @@ -246,40 +246,40 @@ Each of these subjects is introduced in more detail in the following pages. * [Modules](guide/architecture-modules) - [模块](guide/architecture-modules) + [模块](guide/architecture-modules) * [Components](guide/architecture-components) - [组件](guide/architecture-components) + [组件](guide/architecture-components) * [Templates](guide/architecture-components#templates-and-views) - [模板](guide/architecture-components#templates-and-views) + [模板](guide/architecture-components#templates-and-views) * [Metadata](guide/architecture-components#component-metadata) - [元数据](guide/architecture-components#component-metadata) + [元数据](guide/architecture-components#component-metadata) * [Data binding](guide/architecture-components#data-binding) - [绑定](guide/architecture-components#data-binding) + [绑定](guide/architecture-components#data-binding) * [Directives](guide/architecture-components#directives) - [指令](guide/architecture-components#directives) + [指令](guide/architecture-components#directives) * [Pipes](guide/architecture-components#pipes) - [管道](guide/architecture-components#pipes) + [管道](guide/architecture-components#pipes) * [Services and dependency injection](guide/architecture-services) - [服务于依赖注入](guide/architecture-services) + [服务于依赖注入](guide/architecture-services)
    Note that the code referenced on these pages is available as a . - + 注意，这些页面中的代码都在中。
    diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md index 662ebcbb63..c3da2477e7 100644 --- a/aio/content/guide/bootstrapping.md +++ b/aio/content/guide/bootstrapping.md @@ -279,6 +279,6 @@ root module's `bootstrap` array. ## 关于 Angular 模块的更多知识 For more on NgModules you're likely to see frequently in apps, -see [Frequently Used Modules](#). +see [Frequently Used Modules](guide/frequent-ngmodules). -要进一步了解常见的 NgModules 知识，参见 [关于模块的常见问题](#)。 +要进一步了解常见的 NgModules 知识，参见 [关于模块的常见问题](guide/frequent-ngmodules)。 diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md index ddc00029ad..1a332dc909 100644 --- a/aio/content/guide/cheatsheet.md +++ b/aio/content/guide/cheatsheet.md @@ -1060,9 +1060,9 @@ so the @Directive configuration applies to components as well

    -

    Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.

    +

    Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.

    -

    当ngAfterContentInit完毕，并且组件的视图已经初始化完毕时调用。只适用于组件。

    +

    当ngAfterContentInit完毕，并且组件的视图及其子视图或指令所属的视图已经初始化完毕时调用。 @@ -1076,9 +1076,9 @@ so the @Directive configuration applies to components as well

    -

    Called after every check of the component's view. Applies to components only.

    +

    Called after every check of the component's views and child views / the view that a directive is in.

    -

    当组件视图每次执行变更检测时调用。只适用于组件。

    +

    当组件的视图及其子视图或指令所属的视图每次执行变更检测时调用。

    diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md index d0bffb73ae..06d11353c1 100644 --- a/aio/content/guide/comparing-observables.md +++ b/aio/content/guide/comparing-observables.md @@ -532,7 +532,7 @@ An observable produces values over time. An array is created as a static set of - 
    arr.find((v) => v>10)
    + 
    arr.find((v) => v>3)
    5
    @@ -580,8 +580,8 @@ An observable produces values over time. An array is created as a static set of 1 2 3 -4 -5 +5 +7 @@ -593,8 +593,8 @@ An observable produces values over time. An array is created as a static set of 1 2 3 -4 -5 +5 +7 diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md index 343d078b2c..81b8645116 100644 --- a/aio/content/guide/component-interaction.md +++ b/aio/content/guide/component-interaction.md @@ -88,7 +88,7 @@ E2E test that all children were instantiated and displayed as expected: 端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。 - + @@ -135,7 +135,7 @@ E2E tests of input property setter with empty and non-empty names: 端到端测试：输入属性的 setter，分别使用空名字和非空名字。 - + @@ -198,7 +198,7 @@ the expected `ngOnChanges` calls and values: 测试确保***这两个***输入属性值都被初始化了，当点击按钮后，`ngOnChanges` 应该被调用，属性的值也符合预期。 - + @@ -257,7 +257,7 @@ Test that clicking the *Agree* and *Disagree* buttons update the appropriate cou 测试确保点击 *Agree* 和 *Disagree* 按钮时，计数器被正确更新。 - + @@ -333,7 +333,7 @@ Test also that clicking the *Stop* button pauses the countdown timer: 测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击 *Stop* 按钮来停止倒计时： - + @@ -519,7 +519,7 @@ and verify that the history meets expectations: 测试确保点击父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 两个的组件的按钮时，*History* 日志和预期的一样。 - + diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md index 9c28c78889..7898137248 100644 --- a/aio/content/guide/component-styles.md +++ b/aio/content/guide/component-styles.md @@ -371,9 +371,9 @@ In this case, the URL is relative to the CSS file into which you're importing. ### 外部以及全局样式文件 -When building with the CLI, you must configure the `.angular-cli.json` to include _all external assets_, including external style files. +When building with the CLI, you must configure the `angular.json` to include _all external assets_, including external style files. -当使用 CLI 进行构建时，你必须配置 `.angular-cli.json` 文件，使其包含*所有外部资源*（包括外部的样式表文件）。 +当使用 CLI 进行构建时，你必须配置 `angular.json` 文件，使其包含*所有外部资源*（包括外部的样式表文件）。 Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file.