fix: sync to 6.0(WIP)
This commit is contained in:
parent
a0c16c7b54
commit
77a2381d0a
|
@ -1,6 +1,6 @@
|
||||||
# AngularJS to Angular Quick Reference
|
# AngularJS to Angular Concepts: Quick Reference
|
||||||
|
|
||||||
# 从 AngularJS 到 Angular 快速参考
|
# 关于AngularJS 与 Angular 概念的快速参考
|
||||||
|
|
||||||
{@a top}
|
{@a top}
|
||||||
|
|
||||||
|
@ -1576,10 +1576,10 @@ also encapsulate a style sheet within a specific component.
|
||||||
|
|
||||||
<code-example hideCopy path="ajs-quick-reference/.angular-cli.1.json" region="styles" linenums="false"></code-example>
|
<code-example hideCopy path="ajs-quick-reference/.angular-cli.1.json" region="styles" linenums="false"></code-example>
|
||||||
|
|
||||||
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.
|
You can rename the extension to `.scss` to use sass.
|
||||||
|
|
||||||
使用 Angular CLI,你可以在 `.angular-cli.json` 文件中配置全局样式。
|
使用 Angular CLI,你可以在 `angular.json` 文件中配置全局样式。
|
||||||
也可以把扩展名改为 `.scss` 来使用 sass。
|
也可以把扩展名改为 `.scss` 来使用 sass。
|
||||||
|
|
||||||
### StyleUrls
|
### StyleUrls
|
||||||
|
|
|
@ -166,7 +166,7 @@ The option is `false` by default.
|
||||||
|
|
||||||
这个选项告诉编译器不要生成 `.metadata.json` 文件,它默认是 `false`。
|
这个选项告诉编译器不要生成 `.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,
|
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
|
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.
|
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*
|
### *strictMetadataEmit*
|
||||||
|
|
||||||
This option tells the template compiler to report an error to the `.metadata.json`
|
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`,那就把错误信息汇报到 `.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.
|
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*
|
### *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.
|
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.
|
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` 文件时自动执行这种改写。
|
从 Angular v5 开始,编译器会在生成 `.js` 文件时自动执行这种改写。
|
||||||
|
|
||||||
|
@ -996,7 +996,7 @@ The following are metadata errors you may encounter, with explanations and sugge
|
||||||
|
|
||||||
<h3 class="no-toc">不支持这种表达式格式</h3>
|
<h3 class="no-toc">不支持这种表达式格式</h3>
|
||||||
|
|
||||||
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 元数据求值时遇到了一个它不能理解的表达式。
|
编译器在对 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.
|
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` 文件中声明的环境类型。
|
比如,`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.
|
The Angular compiler does not understand a type that you neglect to export or import.
|
||||||
|
|
||||||
TypeScript 能理解这些环境类型,所以你不用导入它们。
|
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:
|
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
|
## Phase 3: binding expression validation
|
||||||
|
|
||||||
## 阶段 3:验证绑定表达式
|
## 阶段 3:验证绑定表达式
|
||||||
|
|
||||||
In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the
|
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
|
option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see
|
||||||
[Angular Compiler Options](#compiler-options)).
|
[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.
|
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
|
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
|
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.
|
`templateUrl` instead of a synthetic file.
|
||||||
|
|
||||||
错误信息中汇报的文件名 `my.component.ts.MyComponent.html` 是一个由模板编译器生成出的虚拟文件,
|
错误信息中汇报的文件名 `my.component.ts.MyComponent.html` 是一个由模板编译器生成出的虚拟文件,
|
||||||
|
|
|
@ -45,7 +45,7 @@ Angular creates, updates, and destroys components as the user moves through the
|
||||||
|
|
||||||
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" class="left">
|
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" class="left">
|
||||||
|
|
||||||
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` 装饰器会指出紧随其后的那个类是个组件类,并为其指定元数据。
|
`@Component` 装饰器会指出紧随其后的那个类是个组件类,并为其指定元数据。
|
||||||
在下面的范例代码中,你可以看到 `HeroListComponent` 只是一个普通类,完全没有 Angular 特有的标记或语法。
|
在下面的范例代码中,你可以看到 `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 `<app-hero-list></app-hero-list>`, then
|
* `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 `<app-hero-list></app-hero-list>`, then
|
||||||
Angular inserts an instance of the `HeroListComponent` view between those tags.
|
Angular inserts an instance of the `HeroListComponent` view between those tags.
|
||||||
|
|
||||||
`selector`:是一个 CSS 选择器,它会告诉 Angular,一旦在模板 HTML 中找到了这个选择器对应的标签,就创建并插入该组件的一个实例。
|
`selector`:是一个 CSS 选择器,它会告诉 Angular,一旦在模板 HTML 中找到了这个选择器对应的标签,就创建并插入该组件的一个实例。
|
||||||
比如,如果应用的 HTML 中包含 `<app-hero-list></app-hero-list>`,Angular 就会在这些标签中插入一个 `HeroListComponent` 实例的视图。
|
比如,如果应用的 HTML 中包含 `<app-hero-list></app-hero-list>`,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`: 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 模板。
|
另外,你还可以用 `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
|
* `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.
|
in order to get the list of heroes to display.
|
||||||
|
|
||||||
`providers` 是当前组件所需的**依赖注入提供商**的一个数组。在这个例子中,它告诉 Angular,该组件的构造函数需要一个 `HeroService` 实例,以获取要显示的英雄列表。
|
`providers` 是当前组件所需的**依赖注入提供商**的一个数组。在这个例子中,它告诉 Angular,该组件的构造函数需要一个 `HeroService` 实例,以获取要显示的英雄列表。
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
|
@ -134,15 +134,15 @@ This template uses typical HTML elements like `<h2>` and `<p>`, and also includ
|
||||||
|
|
||||||
* The `*ngFor` directive tells Angular to iterate over a list.
|
* 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.
|
* 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 `<app-hero-detail>` 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.
|
* The `<app-hero-detail>` 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.
|
||||||
|
|
||||||
模板中的 `<app-hero-detail>` 标签是一个代表新组件 `HeroDetailComponent` 的元素。
|
模板中的 `<app-hero-detail>` 标签是一个代表新组件 `HeroDetailComponent` 的元素。
|
||||||
`HeroDetailComponent`(代码略)是 `HeroListComponent` 的一个子组件,它定义了英雄详情视图。
|
`HeroDetailComponent`(代码略)是 `HeroListComponent` 的一个子组件,它定义了英雄详情视图。
|
||||||
注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。
|
注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。
|
||||||
|
|
||||||
|
@ -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.
|
* 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:
|
**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 `<li>` per hero in the `heroes` list.
|
* [`*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>` 渲染出一个 `<li>`。
|
||||||
|
|
||||||
* [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
|
* [`*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
|
#### Attribute directives
|
||||||
|
|
||||||
|
|
|
@ -29,24 +29,24 @@ NgModule 是一个带有 `@NgModule` 装饰器的类。`@NgModule` 装饰器是
|
||||||
|
|
||||||
* `declarations`—The [components](guide/architecture-components), _directives_, and _pipes_ that belong to this 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`—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`—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`—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`—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:
|
Here's a simple root NgModule definition:
|
||||||
|
|
||||||
|
|
|
@ -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.
|
* [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.
|
* [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
|
#### 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): 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.
|
* [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)。
|
这让你可以在服务器上运行 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 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 来减轻对网络的依赖,你可以显著提升用户体验。
|
Service Worker 的功能类似于网络代理。它们会拦截发出的 HTTP 请求,如果存在已缓存的响应,则直接返回它。通过使用 Service Worker 来减轻对网络的依赖,你可以显著提升用户体验。
|
||||||
|
|
||||||
#### Domain-specific libraries
|
#### Domain-specific libraries
|
||||||
|
@ -44,11 +44,11 @@ Angular 提供了本文档中所包含的很多特性和服务。
|
||||||
* [Animations](guide/animations): Animate component behavior
|
* [Animations](guide/animations): Animate component behavior
|
||||||
without deep knowledge of animation techniques or CSS with Angular's animation library.
|
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): 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
|
#### 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.
|
* [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.
|
* [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.
|
* [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.
|
* [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
|
#### 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.
|
* [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.
|
* [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 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.
|
* [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.
|
* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
|
||||||
|
|
||||||
[发布](guide/deployment):学习把你的应用发布到远端服务器的技巧。
|
[发布](guide/deployment):学习把你的应用发布到远端服务器的技巧。
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
|
@ -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_).
|
* 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.
|
* 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.
|
* 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.
|
* 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.
|
* 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`:
|
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.
|
* 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)中添加服务提供商时,服务的同一个实例会服务于你应用中的所有组件。
|
||||||
|
|
||||||
<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers"></code-example>
|
<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers"></code-example>
|
||||||
|
|
||||||
* When you register a provider at the component level, you get a new instance of the
|
* 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:
|
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` 属性中注册服务提供商。
|
要在组件级注册,就要在 `@Component` 元数据的 `providers` 属性中注册服务提供商。
|
||||||
|
|
||||||
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers"></code-example>
|
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (component providers)" region="providers"></code-example>
|
||||||
|
|
|
@ -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.
|
* 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.
|
* 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.
|
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.
|
* 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。
|
模板把普通的 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)*.
|
* 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.
|
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.
|
||||||
|
|
||||||
|
@ -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.
|
* *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.
|
* *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.
|
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.
|
||||||
|
|
||||||
|
@ -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.
|
* 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.
|
* 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.
|
* 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.
|
* 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.
|
Each of these subjects is introduced in more detail in the following pages.
|
||||||
|
|
||||||
|
@ -246,35 +246,35 @@ Each of these subjects is introduced in more detail in the following pages.
|
||||||
|
|
||||||
* [Modules](guide/architecture-modules)
|
* [Modules](guide/architecture-modules)
|
||||||
|
|
||||||
[模块](guide/architecture-modules)
|
[模块](guide/architecture-modules)
|
||||||
|
|
||||||
* [Components](guide/architecture-components)
|
* [Components](guide/architecture-components)
|
||||||
|
|
||||||
[组件](guide/architecture-components)
|
[组件](guide/architecture-components)
|
||||||
|
|
||||||
* [Templates](guide/architecture-components#templates-and-views)
|
* [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)
|
* [Metadata](guide/architecture-components#component-metadata)
|
||||||
|
|
||||||
[元数据](guide/architecture-components#component-metadata)
|
[元数据](guide/architecture-components#component-metadata)
|
||||||
|
|
||||||
* [Data binding](guide/architecture-components#data-binding)
|
* [Data binding](guide/architecture-components#data-binding)
|
||||||
|
|
||||||
[绑定](guide/architecture-components#data-binding)
|
[绑定](guide/architecture-components#data-binding)
|
||||||
|
|
||||||
* [Directives](guide/architecture-components#directives)
|
* [Directives](guide/architecture-components#directives)
|
||||||
|
|
||||||
[指令](guide/architecture-components#directives)
|
[指令](guide/architecture-components#directives)
|
||||||
|
|
||||||
* [Pipes](guide/architecture-components#pipes)
|
* [Pipes](guide/architecture-components#pipes)
|
||||||
|
|
||||||
[管道](guide/architecture-components#pipes)
|
[管道](guide/architecture-components#pipes)
|
||||||
|
|
||||||
* [Services and dependency injection](guide/architecture-services)
|
* [Services and dependency injection](guide/architecture-services)
|
||||||
|
|
||||||
[服务于依赖注入](guide/architecture-services)
|
[服务于依赖注入](guide/architecture-services)
|
||||||
|
|
||||||
<div class="l-sub-section">
|
<div class="l-sub-section">
|
||||||
|
|
||||||
|
|
|
@ -279,6 +279,6 @@ root module's `bootstrap` array.
|
||||||
## 关于 Angular 模块的更多知识
|
## 关于 Angular 模块的更多知识
|
||||||
|
|
||||||
For more on NgModules you're likely to see frequently in apps,
|
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)。
|
||||||
|
|
|
@ -1060,9 +1060,9 @@ so the <code>@Directive</code> configuration applies to components as well</p>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
<p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>
|
<p>Called after <code>ngAfterContentInit</code> when the component's views and child views / the view that a directive is in has been initialized.</p>
|
||||||
|
|
||||||
<p>当<code>ngAfterContentInit</code>完毕,并且组件的视图已经初始化完毕时调用。只适用于组件。</p>
|
<p>当<code>ngAfterContentInit</code>完毕,并且组件的视图及其子视图或指令所属的视图已经初始化完毕时调用。
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
@ -1076,9 +1076,9 @@ so the <code>@Directive</code> configuration applies to components as well</p>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
<p>Called after every check of the component's view. Applies to components only.</p>
|
<p>Called after every check of the component's views and child views / the view that a directive is in.</p>
|
||||||
|
|
||||||
<p>当组件视图每次执行变更检测时调用。只适用于组件。</p>
|
<p>当组件的视图及其子视图或指令所属的视图每次执行变更检测时调用。</p>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
|
@ -532,7 +532,7 @@ An observable produces values over time. An array is created as a static set of
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
<pre>arr.find((v) => v>10)</pre>
|
<pre>arr.find((v) => v>3)</pre>
|
||||||
|
|
||||||
<pre>5</pre>
|
<pre>5</pre>
|
||||||
|
|
||||||
|
@ -580,8 +580,8 @@ An observable produces values over time. An array is created as a static set of
|
||||||
1
|
1
|
||||||
2
|
2
|
||||||
3
|
3
|
||||||
4
|
5
|
||||||
5</pre>
|
7</pre>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
@ -593,8 +593,8 @@ An observable produces values over time. An array is created as a static set of
|
||||||
1
|
1
|
||||||
2
|
2
|
||||||
3
|
3
|
||||||
4
|
5
|
||||||
5</pre>
|
7</pre>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
|
@ -88,7 +88,7 @@ E2E test that all children were instantiated and displayed as expected:
|
||||||
|
|
||||||
端到端测试,用于确保所有的子组件都像所期待的那样被初始化并显示出来。
|
端到端测试,用于确保所有的子组件都像所期待的那样被初始化并显示出来。
|
||||||
|
|
||||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e/app.e2e-spec.ts">
|
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
@ -135,7 +135,7 @@ E2E tests of input property setter with empty and non-empty names:
|
||||||
|
|
||||||
端到端测试:输入属性的 setter,分别使用空名字和非空名字。
|
端到端测试:输入属性的 setter,分别使用空名字和非空名字。
|
||||||
|
|
||||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e/app.e2e-spec.ts">
|
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
@ -198,7 +198,7 @@ the expected `ngOnChanges` calls and values:
|
||||||
|
|
||||||
测试确保***这两个***输入属性值都被初始化了,当点击按钮后,`ngOnChanges` 应该被调用,属性的值也符合预期。
|
测试确保***这两个***输入属性值都被初始化了,当点击按钮后,`ngOnChanges` 应该被调用,属性的值也符合预期。
|
||||||
|
|
||||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e/app.e2e-spec.ts">
|
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
@ -257,7 +257,7 @@ Test that clicking the *Agree* and *Disagree* buttons update the appropriate cou
|
||||||
|
|
||||||
测试确保点击 *Agree* 和 *Disagree* 按钮时,计数器被正确更新。
|
测试确保点击 *Agree* 和 *Disagree* 按钮时,计数器被正确更新。
|
||||||
|
|
||||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e/app.e2e-spec.ts">
|
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
@ -333,7 +333,7 @@ Test also that clicking the *Stop* button pauses the countdown timer:
|
||||||
|
|
||||||
测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击 *Stop* 按钮来停止倒计时:
|
测试确保在父组件模板中显示的秒数和子组件状态信息里的秒数同步。它还会点击 *Stop* 按钮来停止倒计时:
|
||||||
|
|
||||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e/app.e2e-spec.ts">
|
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
@ -519,7 +519,7 @@ and verify that the history meets expectations:
|
||||||
|
|
||||||
测试确保点击父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 两个的组件的按钮时,*History* 日志和预期的一样。
|
测试确保点击父组件 `MissionControlComponent` 和子组件 `AstronautComponent` 两个的组件的按钮时,*History* 日志和预期的一样。
|
||||||
|
|
||||||
<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e/app.e2e-spec.ts">
|
<code-example path="component-interaction/e2e/src/app.e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e/src/app.e2e-spec.ts">
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
|
|
@ -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.
|
Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file.
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue