fix: 查漏补缺
This commit is contained in:
Zhicheng WANG
parent
cababcc4ec
commit
c0fb977d9c
@ -96,7 +96,7 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
||||
|
||||
*deprecated in v10, see the {@link guide/deprecations#ie-9-10-and-mobile deprecations guide}.
|
||||
|
||||
*在 v10 中弃用，参见<a href="/guide/deprecations#ie-9-10">弃用指南</a>。
|
||||
*在 v10 中弃用，参见<a href="/guide/deprecations#ie-9-10-and-mobile">弃用指南</a>。
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
@ -54,7 +54,7 @@ Reactive forms and template-driven forms process and manage form data differentl
|
||||
|
||||
### Key differences
|
||||
|
||||
## 关键差异
|
||||
### 关键差异
|
||||
|
||||
The table below summarizes the key differences between reactive and template-driven forms.
|
||||
|
||||
|
||||
@ -1642,15 +1642,23 @@ A file specifies the root files and the compiler options required to compile a T
|
||||
|
||||
## unidirectional data flow
|
||||
|
||||
## 单向数据流
|
||||
|
||||
A data flow model where the component tree is always checked for changes in one direction (parent to child), which prevents cycles in the change detection graph.
|
||||
|
||||
一种数据流模型，它总是在一个方向（从父到子）上检查组件树是否有变化，以防止在变更检测图中出现循环。
|
||||
|
||||
In practice, this means that data in Angular flows downward during change detection.
|
||||
A parent component can easily change values in its child components because the parent is checked first.
|
||||
A failure could occur, however, if a child component tries to change a value in its parent during change detection (inverting the expected data flow), because the parent component has already been rendered.
|
||||
In development mode, Angular throws the `ExpressionChangedAfterItHasBeenCheckedError` error if your app attempts to do this, rather than silently failing to render the new value.
|
||||
|
||||
在实践中，这意味着 Angular 中的数据会在变更检测过程中向下流动。父组件可以很容易地改变子组件中的值，因为父组件是先检查的。但是，如果子组件在更改检测期间（反转预期的数据流）尝试更改其父组件中的值，则可能会导致错误，因为父组件已经渲染过了。在开发模式下，如果你的应用尝试这样做，Angular 会抛出 `ExpressionChangedAfterItHasBeenCheckedError` 错误，而不是沉默地渲染新值。
|
||||
|
||||
To avoid this error, a [lifecycle hook](guide/lifecycle-hooks) method that seeks to make such a change should trigger a new change detection run. The new run follows the same direction as before, but succeeds in picking up the new value.
|
||||
|
||||
为了避免这个错误，进行此类更改的[生命周期钩子](guide/lifecycle-hooks)方法中就要触发一次新的变更检测。这次新的变更检测与之前那次的方向一样，但可以成功获得新值。
|
||||
|
||||
{@a universal}
|
||||
|
||||
## Universal
|
||||
|
||||
@ -435,19 +435,19 @@ Follow these steps:
|
||||
|
||||
1. Open `messages.fr.xlf` and find the first `<trans-unit>` element. This is a *translation unit*, also known as a *text node*, representing the translation of the `<h1>` greeting tag that was previously marked with the `i18n` attribute:
|
||||
|
||||
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello-before" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello-before" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
> The `id="introductionHeader""` is a [custom ID](#custom-id "Manage marked text with custom IDs"), but without the `@@` prefix required in the source HTML.
|
||||
|
||||
2. Duplicate the `<source>...</source>` element in the text node, rename it `target`, and then replace its content with the French text:
|
||||
|
||||
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello" header="src/locale/messages.fr.xlf (<trans-unit>, after translation)"></code-example>
|
||||
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello" header="src/locale/messages.fr.xlf (trans-unit, after translation)"></code-example>
|
||||
|
||||
> In a more complex translation, the information and context in the [description and meaning elements](#help-translator "Add helpful descriptions and meanings") described previously would help you choose the right words for translation.
|
||||
|
||||
3. Translate the other text nodes the same way as shown in the following example:
|
||||
|
||||
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-other-nodes" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-other-nodes" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
<div class="alert is-important">
|
||||
|
||||
@ -474,7 +474,7 @@ To translate a `plural`, translate its ICU format match values as shown in the f
|
||||
* `one minute ago`
|
||||
* `<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago`
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-plural" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-plural" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
You can add or remove plural cases as needed for each language.
|
||||
|
||||
@ -496,7 +496,7 @@ The following shows a `select` ICU expression in the component template:
|
||||
|
||||
In this example, Angular extracts the expression into two translation units. The first contains the text outside of the `select` clause, and uses a placeholder for `select` (`<x id="ICU">`):
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-1" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-1" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
<div class="alert is-important">
|
||||
|
||||
@ -507,11 +507,11 @@ If you remove the placeholder, the ICU expression will not appear in your transl
|
||||
|
||||
The second translation unit contains the `select` clause:
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-2" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-2" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
The following example shows both translation units after translating:
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-select" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-select" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
{@a translate-nested}
|
||||
|
||||
@ -519,15 +519,15 @@ The following example shows both translation units after translating:
|
||||
|
||||
Angular treats a nested expression in the same manner as an alternate expression, extracting it into two translation units. The first contains the text outside of the nested expression:
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-1" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-1" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
The second translation unit contains the complete nested expression:
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-2" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-2" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
The following example shows both translation units after translating:
|
||||
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested" header="src/locale/messages.fr.xlf (<trans-unit>)"></code-example>
|
||||
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested" header="src/locale/messages.fr.xlf (trans-unit)"></code-example>
|
||||
|
||||
{@a merge}
|
||||
{@a merge-aot}
|
||||
|
||||
@ -55,7 +55,7 @@ You don't have to implement all (or any) of the lifecycle hooks, just the ones y
|
||||
|
||||
### Lifecycle event sequence
|
||||
|
||||
## 生命周期的顺序
|
||||
### 生命周期的顺序
|
||||
|
||||
After your application instantiates a component or directive by calling its constructor, Angular calls the hook methods you have implemented at the appropriate point in the lifecycle of that instance.
|
||||
|
||||
@ -310,7 +310,7 @@ Angular 会按以下顺序执行钩子方法。你可以用它来执行以下类
|
||||
|
||||
### Lifecycle example set
|
||||
|
||||
## 生命周期范例
|
||||
### 生命周期范例
|
||||
|
||||
The <live-example></live-example>
|
||||
demonstrates the use of lifecycle hooks through a series of exercises
|
||||
@ -933,7 +933,7 @@ which can only be reached by querying for them via the property decorated with
|
||||
|
||||
{@a no-unidirectional-flow-worries}
|
||||
|
||||
<div class="alert is-helpful>
|
||||
<div class="alert is-helpful">
|
||||
|
||||
<header>No need to wait for content updates</header>
|
||||
|
||||
|
||||
@ -74,7 +74,7 @@ To install Angular on your local system, you need the following:
|
||||
This guide uses the [npm client](https://docs.npmjs.com/cli/install) command line interface, which is installed with `Node.js` by default.
|
||||
To check that you have the npm client installed, run `npm -v` in a terminal window.
|
||||
|
||||
Angular、Angular CLI 以及 Angular 应用都要依赖 [npm 包](https://docs.npmjs.com/getting-started/what-is-npm)来实现很多特性和功能。要下载并安装 npm 包，你需要一个 npm 包管理器。本指南使用 [npm 客户端](https://docs.npmjs.com/cli/install)命令行界面，该界面默认安装在 `Node.js`。要检查你是否安装了 npm 客户端，请在终端窗口中运行 `npm -v` 。
|
||||
Angular、Angular CLI 以及 Angular 应用都要依赖 [npm 包](https://docs.npmjs.com/getting-started/what-is-npm)来实现很多特性和功能。要下载并安装 npm 包，你需要一个 npm 包管理器。本指南使用 [npm 客户端](https://docs.npmjs.com/cli/install)命令行界面，该界面默认安装在 `Node.js`。要检查你是否安装了 npm 客户端，请在终端窗口中运行 `npm -v` 。
|
||||
|
||||
{@a install-cli}
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@ Angular's `HttpClient`.
|
||||
要查看本页所讲的范例程序，参见<live-example></live-example>。
|
||||
|
||||
</div>
|
||||
|
||||
## Enable HTTP services
|
||||
|
||||
## 启用 HTTP 服务
|
||||
|
||||
36
temp.md
36
temp.md
@ -1,36 +0,0 @@
|
||||
### Using absolute URLs for HTTP (data) requests on the server
|
||||
|
||||
### 在服务器端使用HTTP（数据）请求的绝对URL
|
||||
|
||||
|
||||
The tutorial's `HeroService` and `HeroSearchService` delegate to the Angular `HttpClient` module to fetch application data.
|
||||
These services send requests to *relative* URLs such as `api/heroes`.
|
||||
In a server-side rendered app, HTTP URLs must be *absolute* (for example, `https://my-server.com/api/heroes`).
|
||||
This means that the URLs must be somehow converted to absolute when running on the server and be left relative when running in the browser.
|
||||
|
||||
本教程的`HeroService`和`HeroSearchService`委托给Angular `HttpClient`模块来获取应用数据。这些服务会向`api/heroes`类的*相对* URL发送请求。在服务器端呈现的应用中，HTTP URL必须是*绝对的* （例如， `https://my-server.com/api/heroes` ）。这意味着当在服务器上运行时，URL必须以某种方式转换为绝对值，并且当在浏览器中运行时，它们是相对的。
|
||||
|
||||
|
||||
If you are using one of the `@nguniversal/*-engine` packages (such as `@nguniversal/express-engine`), this is taken care for you automatically.
|
||||
You don't need to do anything to make relative URLs work on the server.
|
||||
|
||||
如果你正在使用其中一个`@nguniversal/*-engine`软件包（例如`@nguniversal/express-engine` ），这会自动为你服务。你无需做任何事情来让相对URL在服务器上运行。
|
||||
|
||||
|
||||
If, for some reason, you are not using an `@nguniversal/*-engine` package, you may need to handle it yourself.
|
||||
|
||||
如果，出于某种原因，你没有使用`@nguniversal/*-engine`包，你可能需要亲自处理它。
|
||||
|
||||
|
||||
The recommended solution is to pass the full request URL to the `options` argument of [renderModule()](api/platform-server/renderModule) or [renderModuleFactory()](api/platform-server/renderModuleFactory) (depending on what you use to render `AppServerModule` on the server).
|
||||
This option is the least intrusive as it does not require any changes to the app.
|
||||
Here, "request URL" refers to the URL of the request as a response to which the app is being rendered on the server.
|
||||
For example, if the client requested `https://my-server.com/dashboard` and you are rendering the app on the server to respond to that request, `options.url` should be set to `https://my-server.com/dashboard`.
|
||||
|
||||
建议的解决方案是将完整的请求URL传递给[renderModule（）](api/platform-server/renderModule)或[renderModuleFactory（）](api/platform-server/renderModuleFactory)的`options`参数（具体取决于你在服务器上渲染`AppServerModule`用途）。此选项的侵入性最小，因为它不需要对应用进行任何更改。这里，“request URL”指的是请求的URL，作为应用在服务器上呈现的响应。例如，如果客户端请求了`https://my-server.com/dashboard`并且要在服务器上渲染该应用来响应该请求，那么`options.url`应设置为`https://my-server.com/dashboard` 。
|
||||
|
||||
|
||||
Now, on every HTTP request made as part of rendering the app on the server, Angular can correctly resolve the request URL to an absolute URL, using the provided `options.url`.
|
||||
|
||||
现在，作为在服务器上呈现应用的一部分，每次HTTP请求，Angular都可以使用提供的`options.url`正确地将请求URL解析为绝对URL。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user