Polish displaying-data.jade (round 2)
This commit is contained in:
Yang Lin
parent
fcb4cba416
commit
bf3a432d03
@ -12,7 +12,8 @@ block includes
|
||||
You'll display the list of hero names and
|
||||
conditionally show a message below the list.
|
||||
|
||||
本章中，我们将创建一个英雄列表组件。我们将显示英雄名字的列表，并在列表下方显示一条消息。
|
||||
本章中，你将创建一个英雄列表组件。
|
||||
你将显示英雄名字的列表，并根据条件在列表下方显示一条消息。
|
||||
|
||||
The final UI looks like this:
|
||||
|
||||
@ -23,14 +24,20 @@ figure.image-display
|
||||
|
||||
:marked
|
||||
# Contents
|
||||
|
||||
# 目录
|
||||
|
||||
* [Showing component properties with interpolation](#interpolation)
|
||||
* [通过插值表达式显示组件的属性](#interpolation)
|
||||
|
||||
[通过插值表达式显示组件的属性](#interpolation)
|
||||
|
||||
* [Showing !{_an} !{_array} property with NgFor](#ngFor)
|
||||
* [通过NgFor显示数组型属性](#ngFor)
|
||||
|
||||
[通过 NgFor 显示数组型属性](#ngFor)
|
||||
|
||||
* [Conditional display with NgIf](#ngIf)
|
||||
* [通过NgIf实现按条件显示](#ngIf)
|
||||
|
||||
[通过 NgIf 实现按条件显示](#ngIf)
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
@ -42,19 +49,20 @@ figure.image-display
|
||||
.l-main-section#interpolation
|
||||
:marked
|
||||
## Showing component properties with interpolation
|
||||
|
||||
## 使用插值表达式显示组件属性
|
||||
|
||||
The easiest way to display a component property
|
||||
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}}`.
|
||||
|
||||
要显示组件的属性，最简单的方式就是通过插值表达式（interpolation）来绑定属性名。
|
||||
要显示组件的属性，最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。
|
||||
要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如`{{myHero}}`。
|
||||
|
||||
Follow the [setup](setup.html) instructions for creating a new project
|
||||
named <ngio-ex path="displaying-data"></ngio-ex>.
|
||||
|
||||
按照[搭建本地开发环境](setup.html)的说明，创建一个新项目，名为<ngio-ex path="displaying-data"></ngio-ex>。
|
||||
按照[开发环境](setup.html)的说明，创建一个新项目，名为<ngio-ex path="displaying-data"></ngio-ex>。
|
||||
|
||||
Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by
|
||||
changing the template and the body of the component.
|
||||
@ -87,8 +95,8 @@ figure.image-display
|
||||
quote (`'`)—allows you to compose a string over several lines, which makes the
|
||||
HTML more readable.
|
||||
|
||||
模板是包在ECMAScript 2015反引号（<code>\`</code>）中的一个多行字符串。
|
||||
反引号（<code>\`</code>） —— 注意，不是单引号(') —— 允许把一个字符串写在多行上，
|
||||
模板是包在 ECMAScript 2015 反引号 (<code>\`</code>) 中的一个多行字符串。
|
||||
反引号 (<code>\`</code>) — 注意，不是单引号 (') — 允许把一个字符串写在多行上，
|
||||
使 HTML 模板更容易阅读。
|
||||
|
||||
:marked
|
||||
@ -102,13 +110,13 @@ figure.image-display
|
||||
More precisely, the redisplay occurs after some kind of asynchronous event related to
|
||||
the view, such as a keystroke, a timer completion, or a response to an HTTP request.
|
||||
|
||||
严格来说，“重新显示”是在某些与视图有关的异步事件之后发生的，比如：按键、定时器完成或对HTTP请求的响应。
|
||||
严格来说，“重新显示”是在某些与视图有关的异步事件之后发生的，例如，按键、定时器完成或对 HTTP 请求的响应。
|
||||
|
||||
:marked
|
||||
Notice that you don't call **new** to create an instance of the `AppComponent` class.
|
||||
Angular is creating an instance for you. How?
|
||||
|
||||
注意，我们从没调用过**new**来创建`AppComponent`类的实例，是Angular替我们创建了它。那么它是如何创建的呢？
|
||||
注意，我们没有调用 **new** 来创建`AppComponent`类的实例，是 Angular 替我们创建了它。那么它是如何创建的呢？
|
||||
|
||||
The CSS `selector` in the `@Component` !{_decorator} specifies an element named `<my-app>`.
|
||||
That element is a placeholder in the body of your `index.html` file:
|
||||
@ -128,7 +136,7 @@ figure.image-display
|
||||
|
||||
Now run the app. It should display the title and hero name:
|
||||
|
||||
试一下本应用。它应该显示出标题和英雄名。
|
||||
运行应用。它应该显示出标题和英雄名：
|
||||
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/displaying-data/title-and-hero.png" alt="Title and Hero")
|
||||
@ -137,21 +145,22 @@ figure.image-display
|
||||
:marked
|
||||
The next few sections review some of the coding choices in the app.
|
||||
|
||||
我们来回顾一下以前所做的决定，看看还有哪些其它选择。
|
||||
回顾一下前面所做的决定，看看还有哪些其它选择。
|
||||
|
||||
:marked
|
||||
## Template inline or template file?
|
||||
|
||||
## 内联（inline）模板还是模板文件？
|
||||
## 内联 (inline) 模板还是模板文件？
|
||||
|
||||
You can store your component's template in one of two places.
|
||||
You can define it *inline* using the `template` property, or you can define
|
||||
the template in a separate HTML file and link to it in
|
||||
the component metadata using the `@Component` !{_decorator}'s `templateUrl` property.
|
||||
|
||||
我们有两种地方可以用来存放组件模板。
|
||||
我们可以使用`template`属性把它定义为 *内联* 的，或者把模板定义在一个独立的HTML文件中，
|
||||
并通过在`@Component`装饰器中的`templateUrl`属性把它链接到组件。
|
||||
你可以在两种地方存放组件模板。
|
||||
你可以使用`template`属性把它定义为*内联*的，或者把模板定义在一个独立的 HTML 文件中，
|
||||
再通过`@Component`装饰器中的`templateUrl`属性，
|
||||
在组件元数据中把它链接到组件。
|
||||
|
||||
The choice between inline and separate HTML is a matter of taste,
|
||||
circumstances, and organization policy.
|
||||
@ -159,11 +168,11 @@ figure.image-display
|
||||
is simpler without the additional HTML file.
|
||||
|
||||
到底选择内联 HTML 还是独立 HTML 取决于个人喜好、具体状况和组织级策略。
|
||||
这里我们选择内联HTML，是因为模板很小，而且没有额外的HTML文件显得这个演示简单些。
|
||||
上面的应用选择内联 HTML ，是因为模板很小，而且没有额外的 HTML 文件显得这个演示简单些。
|
||||
|
||||
In either style, the template data bindings have the same access to the component's properties.
|
||||
|
||||
无论用哪种风格，模板中的数据绑定在访问组件属性方面都是完全一样的。
|
||||
无论用哪种风格，模板数据绑定在访问组件属性方面都是完全一样的。
|
||||
|
||||
+ifDocsFor('ts')
|
||||
:marked
|
||||
@ -198,7 +207,7 @@ figure.image-display
|
||||
Now use the Angular `ngFor` directive in the template to display
|
||||
each item in the `heroes` list.
|
||||
|
||||
现在，我们在模板中使用Angular的`ngFor`指令来显示`heroes`列表中的每一项。
|
||||
接着，在模板中使用 Angular 的`ngFor`指令来显示`heroes`列表中的每一项。
|
||||
|
||||
+makeExcerpt('app/app.component.2.ts', 'template')
|
||||
|
||||
@ -208,7 +217,7 @@ figure.image-display
|
||||
It marks that `<li>` element (and its children) as the "repeater template":
|
||||
|
||||
这个界面使用了由`<ul>`和`<li>`标签组成的无序列表。`<li>`元素里的`*ngFor`是 Angular 的“迭代”指令。
|
||||
它将`<li>`元素和它的子级标记为“迭代模板”：
|
||||
它将`<li>`元素及其子级标记为“迭代模板”：
|
||||
|
||||
+makeExcerpt('app/app.component.2.ts ()', 'li', '')
|
||||
|
||||
@ -217,8 +226,8 @@ figure.image-display
|
||||
Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
|
||||
For more information, see the [Template Syntax](./template-syntax.html#ngFor) page.
|
||||
|
||||
不要忘记`*ngFor`中的前导星号（\*）。它是语法中不可或缺的一部分。
|
||||
要了解关于此语法和`ngFor`的更多知识，请参见[模板语法](./template-syntax.html#ngFor)一章。
|
||||
不要忘记`*ngFor`中的前导星号 (\*)。它是语法中不可或缺的一部分。
|
||||
更多信息，见[模板语法](./template-syntax.html#ngFor)。
|
||||
:marked
|
||||
Notice the `hero` in the `ngFor` double-quoted instruction;
|
||||
it is an example of a template input variable. Read
|
||||
@ -227,13 +236,13 @@ figure.image-display
|
||||
|
||||
注意看`ngFor`双引号表达式中的`hero`，它是一个模板输入变量。
|
||||
更多模板输入变量的信息，见[模板语法](./template-syntax.html)中的
|
||||
[微语法（microsyntax）](./template-syntax.html#ngForMicrosyntax)。
|
||||
[微语法 (microsyntax)](./template-syntax.html#ngForMicrosyntax)。
|
||||
|
||||
Angular duplicates the `<li>` for each item in the list, setting the `hero` variable
|
||||
to the item (the hero) in the current iteration. Angular uses that variable as the
|
||||
context for the interpolation in the double curly braces.
|
||||
|
||||
Angular为列表中的每个条目复制一个`<li>`元素，在每个迭代中，都会把`hero`变量设置为当前条目（英雄）。
|
||||
Angular 为列表中的每个条目复制一个`<li>`元素，在每个迭代中，把`hero`变量设置为当前条目（英雄）。
|
||||
Angular 把`hero`变量作为双花括号插值表达式的上下文。
|
||||
.l-sub-section
|
||||
:marked
|
||||
@ -241,7 +250,7 @@ figure.image-display
|
||||
repeat items for any [iterable](!{_iterableUrl}) object.
|
||||
|
||||
本例中，`ngFor`用于显示一个“数组”，
|
||||
但`ngFor`可以为任何[可迭代的（iterable）](!{_iterableUrl})对象重复渲染条目。
|
||||
但`ngFor`可以为任何[可迭代的 (iterable) ](!{_iterableUrl})对象重复渲染条目。
|
||||
|
||||
:marked
|
||||
Now the heroes appear in an unordered list.
|
||||
@ -266,7 +275,7 @@ figure.image-display
|
||||
At the moment, the binding is to !{_an} !{_array} of strings.
|
||||
In real applications, most bindings are to more specialized objects.
|
||||
|
||||
现在，我们绑定到了一个字符串数组。在真实的应用中，大多时候我们会绑定到一个对象数组。
|
||||
现在使用的是到了一个字符串数组的绑定。在真实的应用中，大多是到一个对象数组的绑定。
|
||||
|
||||
To convert this binding to use specialized objects, turn the !{_array}
|
||||
of hero names into !{_an} !{_array} of `Hero` objects. For that you'll need a `Hero` class.
|
||||
@ -283,12 +292,12 @@ block hero-class
|
||||
:marked
|
||||
You've defined a class with a constructor and two properties: `id` and `name`.
|
||||
|
||||
我们定义了一个类，具有一个构造函数和两个属性：`id`和`name`。
|
||||
你定义了一个类，具有一个构造函数和两个属性：`id`和`name`。
|
||||
|
||||
It might not look like the class has properties, but it does.
|
||||
The declaration of the constructor parameters takes advantage of a TypeScript shortcut.
|
||||
|
||||
它可能看上去不像是有属性的类，但我们确实有。我们利用的是TypeScript提供的简写形式 —— 用构造函数的参数直接定义属性。
|
||||
它可能看上去不像是有属性的类，但它确实有，利用的是 TypeScript 提供的简写形式 —— 用构造函数的参数直接定义属性。
|
||||
|
||||
Consider the first parameter:
|
||||
|
||||
@ -303,15 +312,15 @@ block hero-class
|
||||
|
||||
* Declares a constructor parameter and its type
|
||||
|
||||
* 声明了一个构造函数参数及其类型
|
||||
声明了一个构造函数参数及其类型
|
||||
|
||||
* Declares a public property of the same name
|
||||
|
||||
* 声明了一个同名的公共属性
|
||||
声明了一个同名的公共属性
|
||||
|
||||
* Initializes that property with the corresponding argument when we "new" an instance of the class
|
||||
|
||||
* 当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值
|
||||
当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
@ -322,7 +331,7 @@ block hero-class
|
||||
The `heroes` property in the component can now use the `Hero` class to return !{_an} !{_array}
|
||||
of `Hero` objects:
|
||||
|
||||
我们让组件中的`heroes`属性返回一个`Hero`对象的数组。
|
||||
现在使用`Hero`类，让组件中的`heroes`属性返回一个`Hero`对象的数组。
|
||||
|
||||
+makeExcerpt('app/app.component.3.ts', 'heroes')
|
||||
|
||||
@ -331,7 +340,7 @@ block hero-class
|
||||
At the moment it displays the hero's `id` and `name`.
|
||||
Fix that to display only the hero's `name` property.
|
||||
|
||||
我们还得更新一下模板。
|
||||
接着，更新一下模板。
|
||||
现在它显示的是英雄的`id`和`name`。
|
||||
要修复它，只显示英雄的`name`属性就行了。
|
||||
|
||||
@ -340,7 +349,7 @@ block hero-class
|
||||
:marked
|
||||
Our display looks the same, but now we know much better what a hero really is.
|
||||
|
||||
从显示上看还是一样，但现在除了名字之外，我们可以有更多英雄信息。
|
||||
从显示上看还是一样，但现在我们知道了更多英雄信息。
|
||||
|
||||
.l-main-section#ngIf
|
||||
:marked
|
||||
@ -350,7 +359,7 @@ block hero-class
|
||||
|
||||
Sometimes an app needs to display a view or a portion of a view only under specific circumstances.
|
||||
|
||||
有时候，应用需要只在特定情况下显示视图或视图的一部分。
|
||||
有时，应用需要只在特定情况下显示视图或视图的一部分。
|
||||
|
||||
Let's change the example to display a message if there are more than three heroes.
|
||||
|
||||
@ -360,7 +369,7 @@ block hero-class
|
||||
To see it in action, add the following paragraph at the bottom of the template:
|
||||
|
||||
Angular 的`ngIf`指令会根据一个布尔条件来显示或移除一个元素。
|
||||
我们来亲自动手试一下，把下列语句加到模板的底部：
|
||||
来看看实际效果，把下列语句加到模板的底部：
|
||||
|
||||
+makeExcerpt('app/app.component.ts', 'message')
|
||||
|
||||
@ -369,7 +378,7 @@ block hero-class
|
||||
Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
|
||||
Read more about `ngIf` and `*` in the [ngIf section](./template-syntax.html#ngIf) of the [Template Syntax](./template-syntax.html) page.
|
||||
|
||||
不要忘了`*ngIf`中的前导星号（\*）。它是本语法中不可或缺的一部分。
|
||||
不要忘了`*ngIf`中的前导星号 (\*)。它是本语法中不可或缺的一部分。
|
||||
更多`ngIf`和`* `的内容，见[模板语法](./template-syntax.html)中的[ngIf](./template-syntax.html#ngIf)。
|
||||
|
||||
:marked
|
||||
@ -398,8 +407,8 @@ block hero-class
|
||||
The browser should refresh automatically and the message should disappear.
|
||||
|
||||
试一下。因为这个数组中有四个条目，所以消息应该显示出来。
|
||||
回到`app.component.ts`，并从英雄数组中删除或注释掉一个元素。
|
||||
浏览器应该自动刷新，而消息应该会消失。
|
||||
回到`app.component.ts`，从英雄数组中删除或注释掉一个元素。
|
||||
浏览器应该自动刷新，消息应该会消失。
|
||||
.l-main-section
|
||||
:marked
|
||||
## Summary
|
||||
@ -408,27 +417,27 @@ block hero-class
|
||||
|
||||
Now you know how to use:
|
||||
|
||||
现在我们知道了如何使用以下内容：
|
||||
现在你知道了如何使用：
|
||||
|
||||
- **Interpolation** with double curly braces to display a component property
|
||||
|
||||
- 用带有双花括号的**插值表达式（interpolation）**来显示一个组件属性
|
||||
带有双花括号的**插值表达式 (interpolation) **来显示一个组件属性
|
||||
|
||||
- **ngFor** to display !{_an} !{_array} of items
|
||||
|
||||
- 用**ngFor**来显示数组
|
||||
**ngFor** 来显示数组
|
||||
|
||||
- A !{_Lang} class to shape the **model data** for our component and display properties of that model
|
||||
|
||||
- 用一个!{_Lang}类来为我们的组件描述**数据模型**并显示模型的属性。
|
||||
用一个 !{_Lang} 类来为我们的组件描述**模型数据**并显示模型的属性
|
||||
|
||||
- **ngIf** to conditionally display a chunk of HTML based on a boolean expression
|
||||
|
||||
- **ngIf**用来根据一个布尔表达式有条件地显示一段HTML
|
||||
**ngIf** 来根据一个布尔表达式有条件地显示一段 HTML
|
||||
|
||||
Here's the final code:
|
||||
|
||||
下面是我们的最终代码：
|
||||
下面是最终的代码：
|
||||
|
||||
block final-code
|
||||
+makeTabs(`displaying-data/ts/app/app.component.ts,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user