fix: 把 interpolation 翻译成的插值表达式改为插值

This commit is contained in:
Zhicheng WANG 2020-01-24 16:43:06 +08:00
parent faaaec80b2
commit ec8397a8ed
17 changed files with 39 additions and 39 deletions

View File

@ -59,7 +59,7 @@ The following table lists some of the key AngularJS template features with their
### Bindings/interpolation ### Bindings/interpolation
### 绑定/插值表达式 ### 绑定/插值
<code-example hideCopy> <code-example hideCopy>
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
@ -84,7 +84,7 @@ The following table lists some of the key AngularJS template features with their
### Bindings/interpolation ### Bindings/interpolation
### 绑定/插值表达式 ### 绑定/插值
<code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation"></code-example> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation"></code-example>
@ -101,7 +101,7 @@ The following table lists some of the key AngularJS template features with their
For more information, see the [Interpolation](guide/template-syntax#interpolation) For more information, see the [Interpolation](guide/template-syntax#interpolation)
section of the [Template Syntax](guide/template-syntax) page. section of the [Template Syntax](guide/template-syntax) page.
要了解更多,请参见[模板语法](guide/template-syntax)中的[插值表达式](guide/template-syntax#interpolation)部分。 要了解更多,请参见[模板语法](guide/template-syntax)中的[插值](guide/template-syntax#interpolation)部分。
</td> </td>

View File

@ -1464,7 +1464,7 @@ template compiler, the same way the `if` expression does in TypeScript. For exam
interpolation if the value of `person` is initialized as shown below: interpolation if the value of `person` is initialized as shown below:
`ngIf` 指令中使用的表达式用来在 Angular 模板编译器中窄化联合类型,就像 TypeScript 中的 `if` 表达式一样。 `ngIf` 指令中使用的表达式用来在 Angular 模板编译器中窄化联合类型,就像 TypeScript 中的 `if` 表达式一样。
比如,要在上述模板中消除 `Object is possibly 'undefined'` 错误,可以把它改成只在 `person` 的值初始化过的时候才生成这个插值表达式 比如,要在上述模板中消除 `Object is possibly 'undefined'` 错误,可以把它改成只在 `person` 的值初始化过的时候才生成这个插值。
```typescript ```typescript

View File

@ -178,7 +178,7 @@ This example from the `HeroListComponent` template uses three of these forms.
* The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation) * The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation)
displays the component's `hero.name` property value within the `<li>` element. displays the component's `hero.name` property value within the `<li>` element.
`{{hero.name}}`[*插值表达式*](guide/displaying-data#interpolation)在 `<li>` 标签中显示组件的 `hero.name` 属性的值。 `{{hero.name}}`这个[*插值*](guide/displaying-data#interpolation)在 `<li>` 标签中显示组件的 `hero.name` 属性的值。
* The `[hero]` [*property binding*](guide/template-syntax#property-binding) passes the value of * The `[hero]` [*property binding*](guide/template-syntax#property-binding) passes the value of
`selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`. `selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.

View File

@ -311,7 +311,7 @@ That gives you a reference to the child component and the ability to access
This example wires parent buttons to the child's `start` and `stop` and This example wires parent buttons to the child's `start` and `stop` and
uses interpolation to display the child's `seconds` property. uses interpolation to display the child's `seconds` property.
这个例子把父组件的按钮绑定到子组件的 `start``stop` 方法,并用插值表达式来显示子组件的 `seconds` 属性。 这个例子把父组件的按钮绑定到子组件的 `start``stop` 方法,并用插值来显示子组件的 `seconds` 属性。
Here we see the parent and child working together. Here we see the parent and child working together.
@ -405,7 +405,7 @@ The `#timer` local variable is gone from the component metadata.
Instead, bind the buttons to the parent component's own `start` and `stop` methods and Instead, bind the buttons to the parent component's own `start` and `stop` methods and
present the ticking seconds in an interpolation around the parent component's `seconds` method. present the ticking seconds in an interpolation around the parent component's `seconds` method.
组件元数据里就不再需要 `#timer` 本地变量了。而是把按钮绑定到父组件自己的 `start``stop` 方法,使用父组件的 `seconds` 方法的插值表达式来展示秒数变化。 组件元数据里就不再需要 `#timer` 本地变量了。而是把按钮绑定到父组件自己的 `start``stop` 方法,使用父组件的 `seconds` 方法的插值来展示秒数变化。
These methods access the injected timer component directly. These methods access the injected timer component directly.

View File

@ -34,14 +34,14 @@ snippets described in this page.
## Showing component properties with interpolation ## Showing component properties with interpolation
## 使用插值表达式显示组件属性 ## 使用插值显示组件属性
The easiest way to display a component property The easiest way to display a component property
is to bind the property name through interpolation. is to bind the property name through interpolation.
With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`. With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
要显示组件的属性,最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。 要显示组件的属性,最简单的方式就是通过插值 (interpolation) 来绑定属性名。
要使用插值表达式,就把属性名包裹在双花括号里放进视图模板,如 `{{myHero}}` 要使用插值,就把属性名包裹在双花括号里放进视图模板,如 `{{myHero}}`
Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`. Use the CLI command [`ng new displaying-data`](cli/new) to create a workspace and app named `displaying-data`.
@ -69,7 +69,7 @@ You added two properties to the formerly empty component: `title` and `myHero`.
The template displays the two component properties using double curly brace The template displays the two component properties using double curly brace
interpolation: interpolation:
修改完的模板会使用双花括号形式的插值表达式来显示这两个模板属性: 修改完的模板会使用双花括号形式的插值来显示这两个模板属性:
<code-example path="displaying-data/src/app/app.component.1.ts" header="src/app/app.component.ts (template)" region="template"></code-example> <code-example path="displaying-data/src/app/app.component.1.ts" header="src/app/app.component.ts (template)" region="template"></code-example>
@ -237,7 +237,7 @@ to the item (the hero) in the current iteration. Angular uses that variable as t
context for the interpolation in the double curly braces. context for the interpolation in the double curly braces.
Angular 为列表中的每个条目复制一个 `<li>` 元素,在每个迭代中,把 `hero` 变量设置为当前条目(英雄)。 Angular 为列表中的每个条目复制一个 `<li>` 元素,在每个迭代中,把 `hero` 变量设置为当前条目(英雄)。
Angular 把 `hero` 变量作为双花括号插值表达式的上下文。 Angular 把 `hero` 变量作为双花括号插值的上下文。
<div class="alert is-helpful"> <div class="alert is-helpful">
@ -418,7 +418,7 @@ Now you know how to use:
* **Interpolation** with double curly braces to display a component property. * **Interpolation** with double curly braces to display a component property.
带有双花括号的**插值表达式 (interpolation) **来显示一个组件属性。 带有双花括号的**插值 (interpolation) **来显示一个组件属性。
* **ngFor** to display an array of items. * **ngFor** to display an array of items.

View File

@ -464,7 +464,7 @@ The `pow` template input variable is a different power in each iteration;
you display its name using the interpolation syntax. you display its name using the interpolation syntax.
列表中的每一项超能力都会渲染成 `<option>` 标签。 列表中的每一项超能力都会渲染成 `<option>` 标签。
模板输入变量 `pow` 在每个迭代指向不同的超能力,使用双花括号插值表达式语法来显示它的名称。 模板输入变量 `pow` 在每个迭代指向不同的超能力,使用双花括号插值语法来显示它的名称。
{@a ngModel} {@a ngModel}
@ -514,7 +514,7 @@ Find the `<input>` tag for *Name* and update it like this:
so you can see what you're doing. so you can see what you're doing.
You left yourself a note to throw it away when you're done. You left yourself a note to throw it away when you're done.
在 input 标签后添加用于诊断的插值表达式,以看清正在发生什么事。 在 input 标签后添加用于诊断的插值,以看清正在发生什么事。
给自己留个备注,提醒你完成后移除它。 给自己留个备注,提醒你完成后移除它。
</div> </div>
@ -1130,7 +1130,7 @@ Add the following HTML below the `<div>` wrapper you just wrote:
There's the hero again, displayed read-only with interpolation bindings. There's the hero again, displayed read-only with interpolation bindings.
This `<div>` appears only while the component is in the submitted state. This `<div>` appears only while the component is in the submitted state.
英雄又出现了,它通过插值表达式绑定显示为只读内容。 英雄又出现了,它通过插值绑定显示为只读内容。
这一小段 HTML 只在组件处于已提交状态时才会显示。 这一小段 HTML 只在组件处于已提交状态时才会显示。
The HTML includes an *Edit* button whose click event is bound to an expression The HTML includes an *Edit* button whose click event is bound to an expression

View File

@ -430,7 +430,7 @@ Read about the following forms of binding in [Template Syntax](guide/template-sy
* [Interpolation](guide/template-syntax#interpolation) * [Interpolation](guide/template-syntax#interpolation)
[插值表达式](guide/template-syntax#interpolation) [插值](guide/template-syntax#interpolation)
* [Property binding](guide/template-syntax#property-binding) * [Property binding](guide/template-syntax#property-binding)
@ -815,7 +815,7 @@ To learn more, see [input and output properties](guide/template-syntax#inputs-ou
## interpolation ## interpolation
## 插值表达式 (interpolation) ## 插值 (interpolation)
A form of property [data binding](#data-binding) in which a [template expression](#template-expression) between double-curly braces renders as text. A form of property [data binding](#data-binding) in which a [template expression](#template-expression) between double-curly braces renders as text.
That text can be concatenated with neighboring text before it is assigned to an element property That text can be concatenated with neighboring text before it is assigned to an element property
@ -831,7 +831,7 @@ or displayed between element tags, as in this example.
Read more about [interpolation](guide/template-syntax#interpolation) in [Template Syntax](guide/template-syntax). Read more about [interpolation](guide/template-syntax#interpolation) in [Template Syntax](guide/template-syntax).
更多信息,见[模板语法](guide/template-syntax)中的[插值表达式](guide/template-syntax#interpolation)。 更多信息,见[模板语法](guide/template-syntax)中的[插值](guide/template-syntax#interpolation)。
{@a ivy} {@a ivy}

View File

@ -602,7 +602,7 @@ for two, three, or any other number if the pluralization rules were different. F
You can use interpolations and html markup inside of your translations. You can use interpolations and html markup inside of your translations.
你可以在翻译结果中使用插值表达式和 HTML 标记。 你可以在翻译结果中使用插值和 HTML 标记。
</div> </div>

View File

@ -56,7 +56,7 @@ contextual possibilities and hints as you type.
This example shows autocomplete in an interpolation. As you type it out, This example shows autocomplete in an interpolation. As you type it out,
you can hit tab to complete. you can hit tab to complete.
自动补全可以在输入时为你提供当前情境下的候选内容和提示,从而提高开发速度。下面这个例子展示了插值表达式中的自动补全功能。当你进行输入的时候,就可以按 tab 键来自动补全。 自动补全可以在输入时为你提供当前情境下的候选内容和提示,从而提高开发速度。下面这个例子展示了插值中的自动补全功能。当你进行输入的时候,就可以按 tab 键来自动补全。
<div class="lightbox"> <div class="lightbox">

View File

@ -138,7 +138,7 @@ You can display the value in these ways:
The following example shows you how to display the current value using interpolation in the template. The following example shows you how to display the current value using interpolation in the template.
下面的例子展示了如何在模板中使用插值表达式显示当前值。 下面的例子展示了如何在模板中使用插值显示当前值。
<code-example path="reactive-forms/src/app/name-editor/name-editor.component.html" region="display-value" header="src/app/name-editor/name-editor.component.html (control value)"></code-example> <code-example path="reactive-forms/src/app/name-editor/name-editor.component.html" region="display-value" header="src/app/name-editor/name-editor.component.html (control value)"></code-example>
@ -553,7 +553,7 @@ When you add a required field to the form control, its initial status is invalid
Display the current status of `profileForm` using interpolation. Display the current status of `profileForm` using interpolation.
使用插值表达式显示 `profileForm` 的当前状态。 使用插值显示 `profileForm` 的当前状态。
<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="display-status" header="src/app/profile-editor/profile-editor.component.html (display status)"></code-example> <code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="display-status" header="src/app/profile-editor/profile-editor.component.html (display status)"></code-example>

View File

@ -87,7 +87,7 @@ is inserted into the DOM from a template, via property, attribute, style, class
Angular sanitizes and escapes untrusted values. Angular sanitizes and escapes untrusted values.
为了系统性的防范 XSS 问题Angular 默认把所有值都当做不可信任的。 为了系统性的防范 XSS 问题Angular 默认把所有值都当做不可信任的。
当值从模板中以属性Property、DOM 元素属性Attribte)、CSS 类绑定或插值表达式等途径插入到 DOM 中的时候, 当值从模板中以属性Property、DOM 元素属性Attribte)、CSS 类绑定或插值等途径插入到 DOM 中的时候,
Angular 将对这些值进行无害化处理Sanitize对不可信的值进行编码。 Angular 将对这些值进行无害化处理Sanitize对不可信的值进行编码。
_Angular templates are the same as executable code_: HTML, attributes, and binding expressions _Angular templates are the same as executable code_: HTML, attributes, and binding expressions
@ -146,14 +146,14 @@ Angular 会对前三项中种不可信的值进行无害化处理,但不能对
The following template binds the value of `htmlSnippet`, once by interpolating it into an element's The following template binds the value of `htmlSnippet`, once by interpolating it into an element's
content, and once by binding it to the `innerHTML` property of an element: content, and once by binding it to the `innerHTML` property of an element:
下面的例子绑定了 `htmlSnippet` 的值,一次把它放进插值表达式里,另一次把它绑定到元素的 `innerHTML` 属性上。 下面的例子绑定了 `htmlSnippet` 的值,一次把它放进插值里,另一次把它绑定到元素的 `innerHTML` 属性上。
<code-example path="security/src/app/inner-html-binding.component.html" header="src/app/inner-html-binding.component.html"></code-example> <code-example path="security/src/app/inner-html-binding.component.html" header="src/app/inner-html-binding.component.html"></code-example>
Interpolated content is always escaped&mdash;the HTML isn't interpreted and the browser displays Interpolated content is always escaped&mdash;the HTML isn't interpreted and the browser displays
angle brackets in the element's text content. angle brackets in the element's text content.
插值表达式的内容总会被编码 - 其中的 HTML 不会被解释,所以浏览器会在元素的文本内容中显示尖括号。 插值的内容总会被编码 - 其中的 HTML 不会被解释,所以浏览器会在元素的文本内容中显示尖括号。
For the HTML to be interpreted, bind it to an HTML property such as `innerHTML`. But binding For the HTML to be interpreted, bind it to an HTML property such as `innerHTML`. But binding
a value that an attacker might control into `innerHTML` normally causes an XSS a value that an attacker might control into `innerHTML` normally causes an XSS

View File

@ -59,7 +59,7 @@ In the following sections, you'll learn how to get and set DOM (Document Object
Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be. Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be.
首先看看数据绑定的第一种形式 —— 插值表达式,它展示了模板的 HTML 可以有多丰富。 首先看看数据绑定的第一种形式 —— 插值,它展示了模板的 HTML 可以有多丰富。
<hr/> <hr/>
@ -82,17 +82,17 @@ the syntax and code snippets described in this section.
### Interpolation `{{...}}` ### Interpolation `{{...}}`
### 插值表达式 `{{...}}` ### 插值 `{{...}}`
Interpolation refers to embedding expressions into marked up text. Interpolation refers to embedding expressions into marked up text.
By default, interpolation uses as its delimiter the double curly braces, `{{` and `}}`. By default, interpolation uses as its delimiter the double curly braces, `{{` and `}}`.
所谓 "插值" 是指将表达式嵌入到标记文本中。 所谓 "插值" 是指将表达式嵌入到标记文本中。
默认情况下,插值表达式会用双花括号 `{{``}}` 作为分隔符。 默认情况下,插值会用双花括号 `{{``}}` 作为分隔符。
In the following snippet, `{{ currentCustomer }}` is an example of interpolation. In the following snippet, `{{ currentCustomer }}` is an example of interpolation.
在下面的代码片段中,`{{ currentCustomer }}` 就是插值表达式的例子。 在下面的代码片段中,`{{ currentCustomer }}` 就是插值的例子。
<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1" header="src/app/app.component.html"></code-example> <code-example path="interpolation/src/app/app.component.html" region="interpolation-example1" header="src/app/app.component.html"></code-example>
@ -100,7 +100,7 @@ The text between the braces is often the name of a component
property. Angular replaces that name with the property. Angular replaces that name with the
string value of the corresponding component property. string value of the corresponding component property.
插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值。 花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值。
<code-example path="interpolation/src/app/app.component.html" region="component-property" header="src/app/app.component.html"></code-example> <code-example path="interpolation/src/app/app.component.html" region="component-property" header="src/app/app.component.html"></code-example>
@ -115,7 +115,7 @@ that Angular first **evaluates** and then **converts to a string**.
The following interpolation illustrates the point by adding two numbers: The following interpolation illustrates the point by adding two numbers:
一般来说,括号间的素材是一个**模板表达式**Angular 先**对它求值**,再把它**转换成字符串**。 一般来说,括号间的素材是一个**模板表达式**Angular 先**对它求值**,再把它**转换成字符串**。
下列插值表达式通过把括号中的两个数字相加说明了这一点: 下列插值通过把括号中的两个数字相加说明了这一点:
<code-example path="interpolation/src/app/app.component.html" region="convert-string" header="src/app/app.component.html"></code-example> <code-example path="interpolation/src/app/app.component.html" region="convert-string" header="src/app/app.component.html"></code-example>

View File

@ -1298,7 +1298,7 @@ actually displays the right content where you think it should.
You'll write a sequence of tests that inspect the value of the `<h1>` element You'll write a sequence of tests that inspect the value of the `<h1>` element
that wraps the _title_ property interpolation binding. that wraps the _title_ property interpolation binding.
你将会写一系列测试来探查 `<h1>` 元素的值,这个值包含在了带有 `title` 属性的插值表达式绑定中。 你将会写一系列测试来探查 `<h1>` 元素的值,这个值包含在了带有 `title` 属性的插值绑定中。
You update the `beforeEach` to find that element with a standard HTML `querySelector` You update the `beforeEach` to find that element with a standard HTML `querySelector`
and assign it to the `h1` variable. and assign it to the `h1` variable.

View File

@ -108,7 +108,7 @@ The [interpolation](guide/template-syntax#interpolation)
displays the accumulating input box changes from the `values` property. displays the accumulating input box changes from the `values` property.
在组件的 `onKey()` 方法中,把输入框的值和分隔符 (|) 追加组件的 `values` 属性。 在组件的 `onKey()` 方法中,把输入框的值和分隔符 (|) 追加组件的 `values` 属性。
使用[插值表达式](guide/template-syntax#interpolation)来把存放累加结果的 `values` 属性回显到屏幕上。 使用[插值](guide/template-syntax#interpolation)来把存放累加结果的 `values` 属性回显到屏幕上。
Suppose the user enters the letters "abc", and then backspaces to remove them one by one. Suppose the user enters the letters "abc", and then backspaces to remove them one by one.
Here's what the UI displays: Here's what the UI displays:
@ -211,7 +211,7 @@ The code uses the `box` variable to get the input element's `value` and display
with interpolation between `<p>` tags. with interpolation between `<p>` tags.
这个模板引用变量名叫 `box`,在 `<input>` 元素声明,它引用 `<input>` 元素本身。 这个模板引用变量名叫 `box`,在 `<input>` 元素声明,它引用 `<input>` 元素本身。
代码使用 `box` 获得输入元素的 `value` 值,并通过插值表达式把它显示在 `<p>` 标签中。 代码使用 `box` 获得输入元素的 `value` 值,并通过插值把它显示在 `<p>` 标签中。
The template is completely self contained. It doesn't bind to the component, The template is completely self contained. It doesn't bind to the component,
and the component does nothing. and the component does nothing.

View File

@ -182,7 +182,7 @@ To help you get going, the following steps use predefined product data from the
property value as text; property binding `[ ]` lets you property value as text; property binding `[ ]` lets you
use the property value in a template expression. use the property value in a template expression.
在预览窗格中,将鼠标悬停在显示的商品名称上,可以看到绑定的 name 属性值。它们都是商品名加上单词 "details" 的格式。插值表达式 `{{}}` 允许你把属性值渲染为文本;而属性绑定语法 `[]` 则允许你在模板表达式中使用属性值。 在预览窗格中,将鼠标悬停在显示的商品名称上,可以看到绑定的 name 属性值。它们都是商品名加上单词 "details" 的格式。插值 `{{}}` 允许你把属性值渲染为文本;而属性绑定语法 `[]` 则允许你在模板表达式中使用属性值。
<div class="lightbox"> <div class="lightbox">
@ -245,7 +245,7 @@ In the process, you've learned to use five common features of Angular's template
* Interpolation `{{ }}` * Interpolation `{{ }}`
插值表达式 `{{}}` 插值 `{{}}`
* Property binding `[ ]` * Property binding `[ ]`

View File

@ -255,4 +255,4 @@ Here are the code files discussed on this page.
* You used the double curly braces of interpolation to display the app title. * You used the double curly braces of interpolation to display the app title.
你使用双花括号插值表达式显示了应用标题。 你使用双花括号插值显示了应用标题。

View File

@ -525,7 +525,7 @@ You're using Angular [interpolation binding](guide/template-syntax#interpolation
to insert the current iteration's `hero.id` into each to insert the current iteration's `hero.id` into each
[`routerLink`](#routerlink). [`routerLink`](#routerlink).
你正在 `*ngFor` 复写器中使用 Angular 的[插值表达式](guide/template-syntax#interpolation)来把当前迭代的 `hero.id` 插入到每个 [`routerLink`](#routerlink) 中。 你正在 `*ngFor` 复写器中使用 Angular 的[插值绑定](guide/template-syntax#interpolation)来把当前迭代的 `hero.id` 插入到每个 [`routerLink`](#routerlink) 中。
{@a heroes-component-links} {@a heroes-component-links}