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 特有的标记或语法。
|
||||||
|
|
|
@ -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