fix: 细修
fix: 避免不必要的冲突
This commit is contained in:
Zhicheng WANG
parent
28b0698600
commit
febaccf780
@ -14,15 +14,15 @@ In this section, you'll create the shopping cart. You'll:
|
||||
在本节中，你将创建购物车。你将：
|
||||
|
||||
|
||||
- Update the product details page to include a "Buy" button, which adds the current product to a list of products managed by a cart service.
|
||||
* Update the product details page to include a "Buy" button, which adds the current product to a list of products managed by a cart service.
|
||||
|
||||
修改商品详情页，让它包含一个 “Buy” 按钮，它会把当前商品添加到由 "购物车服务" 管理的商品列表中。
|
||||
|
||||
- Add a cart component, which displays the items you added to your cart.
|
||||
* Add a cart component, which displays the items you added to your cart.
|
||||
|
||||
添加一个购物车组件，它会显示你添加到购物车中的商品。
|
||||
|
||||
- Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's HttpClient to retrieve shipping data from a `.json` file.
|
||||
* Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's HttpClient to retrieve shipping data from a `.json` file.
|
||||
|
||||
添加一个配送组件，它会使用 Angular 的 HttpClient 从 `.json` 文件中检索配送数据来取得购物车中这些商品的运费。
|
||||
|
||||
@ -324,11 +324,11 @@ Services can be used to share data across components:
|
||||
服务可用于跨组件共享数据：
|
||||
|
||||
|
||||
- The product details component already uses the cart service (`CartService`) to add products to the cart.
|
||||
* The product details component already uses the cart service (`CartService`) to add products to the cart.
|
||||
|
||||
商品详情组件已经使用了购物车服务（ `CartService` ）来把商品添加到购物车中。
|
||||
|
||||
- In this section, you'll update the cart component to use the cart service to display the products in the cart.
|
||||
* In this section, you'll update the cart component to use the cart service to display the products in the cart.
|
||||
|
||||
在本节中，你将修改购物车组件以使用购物车服务来显示购物车中的商品。
|
||||
|
||||
@ -742,11 +742,12 @@ To continue exploring Angular, choose either of the following options:
|
||||
要继续探索 Angular，请选择下列选项之一：
|
||||
|
||||
|
||||
- [Continue to the "Forms" section](getting-started/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout.
|
||||
* [Continue to the "Forms" section](getting-started/forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a form-based checkout feature. You'll create a form to collect user information as part of checkout.
|
||||
|
||||
[继续浏览“表单”部分](getting-started/forms "入门：表单")，通过添加购物车页面和基于表单的结帐功能来完成该应用。你还可以创建一个表单来收集用户信息，作为结账过程的一部分。
|
||||
|
||||
- [Skip ahead to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development.
|
||||
* [Skip ahead to the "Deployment" section](getting-started/deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development.
|
||||
|
||||
[跳到“部署”部分，](getting-started/deployment "入门：部署")把你的应用部署到 Firebase 或转成本地开发。
|
||||
|
||||
|
||||
|
||||
@ -166,7 +166,7 @@ The product details component handles the display of each product. The Angular R
|
||||
To do: This is the first time we inject anything into a component. Should we mention it here? There's also a comment about maybe explaining it a bit in the services section (in data.md).
|
||||
-->
|
||||
|
||||
1. In the `ngOnInit()` method, *subscribe* to route params and fetch the product based on the `productId`.
|
||||
1. In the `ngOnInit()` method, _subscribe_ to route params and fetch the product based on the `productId`.
|
||||
|
||||
在 `ngOnInit()` 方法中，*订阅（subscribe）*路由参数并根据其 `productId` 获取商品信息。
|
||||
|
||||
|
||||
@ -53,11 +53,11 @@ Use the CLI to automatically create the app shell.
|
||||
ng generate app-shell --client-project my-app --universal-project server-app
|
||||
</code-example>
|
||||
|
||||
- `my-app` takes the name of your client application.
|
||||
* `my-app` takes the name of your client application.
|
||||
|
||||
`my-app` 是本客户端应用的名字。
|
||||
|
||||
- `server-app` takes the name of the Universal (or server) application.
|
||||
* `server-app` takes the name of the Universal (or server) application.
|
||||
|
||||
`server-app` 是这个 Universal（或 server）应用的名字。
|
||||
|
||||
|
||||
@ -139,11 +139,11 @@ Now you'll find new files in the Angular workspace:
|
||||
在 Angular 工作区中，你会找到一些新文件：
|
||||
|
||||
|
||||
- `/WORKSPACE` tells Bazel how to download external dependencies.
|
||||
* `/WORKSPACE` tells Bazel how to download external dependencies.
|
||||
|
||||
`/WORKSPACE` 会告诉 Bazel 要如何下载外部依赖。
|
||||
|
||||
- `/BUILD.bazel` and `/src/BUILD.bazel` tell Bazel about your source code.
|
||||
* `/BUILD.bazel` and `/src/BUILD.bazel` tell Bazel about your source code.
|
||||
|
||||
`/BUILD.bazel` 和 `/src/BUILD.bazel` 会告诉 Bazel 你的源代码在哪里。
|
||||
|
||||
@ -153,7 +153,7 @@ You can find a full-featured example with custom Bazel configurations at <http:/
|
||||
你可以在 <http://github.com/angular/angular-bazel-example> 找到一个全功能的 Bazel 配置示例。
|
||||
|
||||
|
||||
Documentation for using Bazel for frontend projects is linked from <https://docs.bazel.build/versions/master/bazel-and-javascript.html>.
|
||||
Documentation for using Bazel for frontend projects is linked from https://docs.bazel.build/versions/master/bazel-and-javascript.html.
|
||||
|
||||
<https://docs.bazel.build/versions/master/bazel-and-javascript.html> 则是一个关于如何使用 Bazel 进行前端项目的文档链接。
|
||||
|
||||
@ -175,15 +175,15 @@ The common commands in Bazel are:
|
||||
Bazel 的常用命令有：
|
||||
|
||||
|
||||
- `bazel build [targets]`: Compile the default output artifacts of the given targets.
|
||||
* `bazel build [targets]`: Compile the default output artifacts of the given targets.
|
||||
|
||||
`bazel build [targets]`：编译指定目标的默认输出成果。
|
||||
|
||||
- `bazel test [targets]`: For whichever `*_test` targets are found in the patterns, run the tests.
|
||||
* `bazel test [targets]`: For whichever `*_test` targets are found in the patterns, run the tests.
|
||||
|
||||
`bazel test [targets]`：对于那些符合 `*_test` 模式的目标，运行测试。
|
||||
|
||||
- `bazel run [target]`: Compile the program represented by target, and then run it.
|
||||
* `bazel run [target]`: Compile the program represented by target, and then run it.
|
||||
|
||||
`bazel run [target]`：编译目标所代表的程序，然后运行它。
|
||||
|
||||
@ -198,7 +198,7 @@ The output locations are printed in the output.
|
||||
在输出中打印了输出到的位置。
|
||||
|
||||
|
||||
Full documentation for the Bazel CLI is at <https://docs.bazel.build/versions/master/command-line-reference.html>.
|
||||
Full documentation for the Bazel CLI is at https://docs.bazel.build/versions/master/command-line-reference.html.
|
||||
|
||||
Bazel CLI 的完整文档位于 <https://docs.bazel.build/versions/master/command-line-reference.html> 。
|
||||
|
||||
@ -222,7 +222,7 @@ Using the graphviz optional dependency, you'll have a program `dot`, which you c
|
||||
$ bazel query --output=graph ... | dot -Tpng > graph.png
|
||||
```
|
||||
|
||||
See <https://docs.bazel.build/versions/master/query-how-to.html> for more details on `bazel query`.
|
||||
See https://docs.bazel.build/versions/master/query-how-to.html for more details on `bazel query`.
|
||||
|
||||
关于 `bazel query` 的详细信息，参见 <https://docs.bazel.build/versions/master/query-how-to.html> 。
|
||||
|
||||
@ -247,6 +247,6 @@ In the `BUILD.bazel` file, each rule must first be imported, using the `load` st
|
||||
在 `BUILD.bazel` 文件中，必须首先使用 `load` 语句导入每个规则。然后用一些属性调用此规则，调用此规则的结果就是向 Bazel 中声明了：当给定一些输入和依赖的时候该如何得到一些输出。然后，当你运行一个 `bazel` 命令时，Bazel 就会加载你声明过的所有规则，以确定它们在运行期间的绝对顺序。注意，只有那些在产生输出时真正起作用的规则才会被执行。
|
||||
|
||||
|
||||
A list of common rules for frontend development is documented in the README at <https://github.com/bazelbuild/rules_nodejs/>.
|
||||
A list of common rules for frontend development is documented in the README at https://github.com/bazelbuild/rules_nodejs/.
|
||||
|
||||
在 [https://github.com/bazelbuild/rules_nodejs/](https://github.com/bazelbuild/rules_nodejs/) 上的 README 文件中记录了前端开发中要用到的通用规则列表。
|
||||
|
||||
@ -163,7 +163,7 @@ A library can include [schematics](guide/glossary#schematic) that allow it to in
|
||||
|
||||
* Include an update schematic so that `ng update` can update your library’s dependencies and provide migrations for breaking changes in new releases.
|
||||
|
||||
包含一个更新（update）schematic ，以便 `ng update` 可以更新此库的依赖，并针对新版本中的破坏性变更提供辅助迁移。
|
||||
包含一个更新（update）原理图 ，以便 `ng update` 可以更新此库的依赖，并针对新版本中的破坏性变更提供辅助迁移。
|
||||
|
||||
To learn more, see [Schematics Overview](guide/schematics) and [Schematics for Libraries](guide/schematics-for-libraries).
|
||||
|
||||
|
||||
@ -880,12 +880,9 @@ The `MinimalLogger` transpiles to this unoptimized, pre-minified JavaScript for
|
||||
</code-example>
|
||||
|
||||
Notice that it doesn't have any members. It never grows no matter how many members you add to the class,
|
||||
as long as those members are typed but not implemented.
|
||||
as long as those members are typed but not implemented. Look again at the TypeScript `MinimalLogger` class to confirm that it has no implementation.
|
||||
|
||||
注意，***只要不实现它***，不管添加多少成员，它都不会增长大小，因为这些成员虽然是有类型的，但却没有实现。
|
||||
|
||||
Look again at the TypeScript `MinimalLogger` class to confirm that it has no implementation.
|
||||
|
||||
你可以再看看 TypeScript 的 `MinimalLogger` 类，确定一下它是没有实现的。
|
||||
|
||||
</div>
|
||||
|
||||
@ -610,7 +610,7 @@ Differential loading is a strategy where the CLI builds two separate bundles as
|
||||
### 差异化构建
|
||||
|
||||
|
||||
The Angular CLI handles differential loading for you as part of the *build* process for deployment. The Angular CLI will produce the necessary bundles used for differential loading, based on your browser support requirements and compilation target.
|
||||
The Angular CLI handles differential loading for you as part of the _build_ process for deployment. The Angular CLI will produce the necessary bundles used for differential loading, based on your browser support requirements and compilation target.
|
||||
|
||||
在面向部署的*构建*过程中，Angular CLI 会为你处理差异化加载。Angular CLI 会根据浏览器的支持情况和编译目标生成用于差异化加载的必要的发布包。
|
||||
|
||||
@ -626,7 +626,7 @@ Angular CLI 使用两种配置进行差异化加载：
|
||||
|
||||
- tsconfig.json - The `target` in the TypeScript `compilerOptions` determines the ECMAScript target version that the code is compiled to. Modern browsers support ES2015 natively, while ES5 is more commonly used to support legacy browsers.
|
||||
|
||||
tsconfig.json - TypeScript `compilerOptions` 会决定编译后代码的 ECMAScript 目标版本。现代浏览器原生支持 ES2015，而 ES5 则更常用于支持老式浏览器。
|
||||
tsconfig.json - TypeScript `compilerOptions` 中的 `target` 会决定编译后代码的 ECMAScript 目标版本。现代浏览器原生支持 ES2015，而 ES5 则更常用于支持老式浏览器。
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
@ -638,7 +638,7 @@ Angular CLI 使用两种配置进行差异化加载：
|
||||
|
||||
</div>
|
||||
|
||||
The CLI queries the Browserslist configuration, and checks the `target` to determine if support for legacy browsers is required. The combination of these two configurations determines whether multiple bundles are produced when you create a *build*. When you create a development build using [`ng build`](cli/build) and differential loading is enabled, the output produced is simpler and easier to debug, allowing you to rely less on sourcemaps of compiled code. When you create a production build using [`ng build --prod`](cli/build), the CLI uses the defined configurations above to determine the bundles to build for deployment of your application.
|
||||
The CLI queries the Browserslist configuration, and checks the `target` to determine if support for legacy browsers is required. The combination of these two configurations determines whether multiple bundles are produced when you create a _build_. When you create a development build using [`ng build`](cli/build) and differential loading is enabled, the output produced is simpler and easier to debug, allowing you to rely less on sourcemaps of compiled code. When you create a production build using [`ng build --prod`](cli/build), the CLI uses the defined configurations above to determine the bundles to build for deployment of your application.
|
||||
|
||||
CLI会查询 "浏览器列表" 配置，并检查 `target` 以确定是否需要支持老式浏览器。这两种配置的结合决定了在创建*构建*时是否产生了多个发布包。当使用 [`ng build`](cli/build) 创建开发构建时，如果启用了差异化加载，产生的输出就会更简单，也更容易调试，因为你可以更少地依赖已编译代码的 sourcemaps。当你使用 [`ng build --prod`](cli/build) 创建一个产品环境构建时，CLI 会使用上面定义的配置来确定要为部署你的应用而构建哪些包。
|
||||
|
||||
@ -705,39 +705,43 @@ The `browserslist` looks like this:
|
||||
`browserslist` 是这样的：
|
||||
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
```
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
```
|
||||
|
||||
The `tsconfig.json` looks like this:
|
||||
|
||||
`tsconfig.json` 是这样的：
|
||||
|
||||
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
By default, legacy browsers such as IE 9-11 are ignored, and the compilation target is ES2015. As a result, this produces two builds, and differential loading is enabled. If you ignore browsers without ES2015 support, a single build is produced. To see the build result for differential loading based on different configurations, refer to the table below.
|
||||
|
||||
|
||||
@ -171,7 +171,7 @@ For more information, see [/deep/, >>>, and ::ng-deep](guide/component-styles#de
|
||||
|
||||
{@a template-tag}
|
||||
|
||||
### <template> tag
|
||||
### <template> tag
|
||||
|
||||
### <template> 标签
|
||||
|
||||
@ -198,15 +198,17 @@ Deprecated:
|
||||
|
||||
已弃用：
|
||||
|
||||
|
||||
<ngForm #myForm="ngForm">
|
||||
```
|
||||
<ngForm #myForm="ngForm">
|
||||
```
|
||||
|
||||
Replacement:
|
||||
|
||||
替代品：
|
||||
|
||||
|
||||
<ng-form #myForm="ngForm">
|
||||
```
|
||||
<ng-form #myForm="ngForm">
|
||||
```
|
||||
|
||||
The [`NgFormSelectorWarning`](api/forms/NgFormSelectorWarning) directive is solely used to display warnings when the deprecated `ngForm` selector is used.
|
||||
|
||||
@ -259,15 +261,17 @@ Before:
|
||||
|
||||
之前：
|
||||
|
||||
|
||||
ReflectiveInjector.resolveAndCreate(providers);
|
||||
```
|
||||
ReflectiveInjector.resolveAndCreate(providers);
|
||||
```
|
||||
|
||||
After:
|
||||
|
||||
之后：
|
||||
|
||||
|
||||
Injector.create({providers});
|
||||
```
|
||||
Injector.create({providers});
|
||||
```
|
||||
|
||||
{@a i18n-pipes}
|
||||
|
||||
@ -322,23 +326,25 @@ Before:
|
||||
|
||||
之前：
|
||||
|
||||
|
||||
const routes: Routes = [{
|
||||
path: 'lazy',
|
||||
// The following string syntax for loadChildren is deprecated
|
||||
loadChildren: './lazy/lazy.module#LazyModule'
|
||||
}];
|
||||
```
|
||||
const routes: Routes = [{
|
||||
path: 'lazy',
|
||||
// The following string syntax for loadChildren is deprecated
|
||||
loadChildren: './lazy/lazy.module#LazyModule'
|
||||
}];
|
||||
```
|
||||
|
||||
After:
|
||||
|
||||
之后：
|
||||
|
||||
|
||||
const routes: Routes = [{
|
||||
path: 'lazy',
|
||||
// The new import() syntax
|
||||
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
|
||||
}];
|
||||
```
|
||||
const routes: Routes = [{
|
||||
path: 'lazy',
|
||||
// The new import() syntax
|
||||
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
|
||||
}];
|
||||
```
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
||||
@ -815,7 +815,7 @@ Certain NgModules, such as `BrowserModule`, implement such a guard.
|
||||
Here is a custom constructor for an NgModule called `GreetingModule`.
|
||||
|
||||
某些 NgModule（例如 `BrowserModule`）就实现了那样一个守卫。
|
||||
下面是一个名叫 `CoreModule` 的 NgModule 的 自定义构造函数。
|
||||
下面是一个名叫 `GreetingModule` 的 NgModule 的 自定义构造函数。
|
||||
|
||||
<code-example path="ngmodules/src/app/greeting/greeting.module.ts" region="ctor" header="src/app/greeting/greeting.module.ts (Constructor)" linenums="false">
|
||||
</code-example>
|
||||
|
||||
@ -512,7 +512,7 @@ A `Rule` can use external template files, transform them, and return another `Ru
|
||||
|
||||
`classify()` 方法接受一个值，并返回标题格式（title case）的值。比如，如果提供的名字是 `my service`，它就会返回 `MyService`。
|
||||
|
||||
* The `dasherize()` method takes a value and returns the value in dashed and lowercase. For example, if the provided name is MyService, it is returned as \`my-service.
|
||||
* The `dasherize()` method takes a value and returns the value in dashed and lowercase. For example, if the provided name is MyService, it is returned as `my-service.
|
||||
|
||||
`dasherize()` 方法接受一个值，并以中线分隔并小写的形式返回值。比如，如果提供的名字是 MyService，它就会返回 “my-service” 的形式。
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ The subcommands for `ng generate` are shorthand for the corresponding schematic.
|
||||
ng generate my-schematic-collection:my-schematic-name
|
||||
</code-example>
|
||||
|
||||
—or—
|
||||
—or—
|
||||
|
||||
\- 或者 -
|
||||
|
||||
@ -77,17 +77,17 @@ As a library developer, you can create your own collections of custom schematics
|
||||
作为一名库开发人员，你可以创建自己的自定义原理图集合，以便把你的库与 Angular CLI 集成在一起。
|
||||
|
||||
|
||||
- An *add schematic* allows developers to install your library in an Angular workspace using `ng add`.
|
||||
* An *add schematic* allows developers to install your library in an Angular workspace using `ng add`.
|
||||
|
||||
*添加（Add）原理图*允许开发人员使用 `ng add` 在 Angular工作空间中安装你的库。
|
||||
|
||||
|
||||
- *Generation schematics* can tell the `ng generate` subcommands how to modify projects, add configurations and scripts, and scaffold artifacts that are defined in your library.
|
||||
* *Generation schematics* can tell the `ng generate` subcommands how to modify projects, add configurations and scripts, and scaffold artifacts that are defined in your library.
|
||||
|
||||
*生成（Generation）原理图*可以告诉 `ng generate` 子命令如何修改项目、添加配置和脚本，以及为库中定义的工件提供脚手架。
|
||||
|
||||
|
||||
- An *update schematic* can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version.
|
||||
* An *update schematic* can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version.
|
||||
|
||||
*更新（Update）原理图*可以告诉 `ng update` 命令，如何更新库的依赖，并在发布新版本时调整其中的破坏性变更。
|
||||
|
||||
|
||||
@ -131,11 +131,11 @@ you'll notice:
|
||||
|
||||
你无法添加或删除英雄。
|
||||
|
||||
- The search box on the Dashboard page is ignored.
|
||||
* The search box on the Dashboard page is ignored.
|
||||
|
||||
仪表盘页面上的搜索框会被忽略。
|
||||
|
||||
- The *Back* and *Save* buttons on the Details page don't work.
|
||||
* The *Back* and *Save* buttons on the Details page don't work.
|
||||
|
||||
“详情”页面上的*后退*和*保存*按钮不起作用。
|
||||
|
||||
|
||||
@ -338,7 +338,7 @@ A asset specification object can have the following fields.
|
||||
|
||||
`output`：相对于 `outDir` 的路径（默认为 `dist/`*project-name* ）。为了杜绝安全隐患，CLI 永远不会在项目输出路径之外写文件。
|
||||
|
||||
- `ignore`: A list of globs to exclude.
|
||||
* `ignore`: A list of globs to exclude.
|
||||
|
||||
`ignore`：要排除的 glob 列表。
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user