646 lines
20 KiB
Markdown
646 lines
20 KiB
Markdown
@title
|
||
主从结构
|
||
|
||
@intro
|
||
构建一个主从结构的页面，用于展现英雄列表
|
||
|
||
@description
|
||
|
||
|
||
In this page, you'll expand the Tour of Heroes app to display a list of heroes, and
|
||
allow users to select a hero and display the hero's details.
|
||
|
||
我们需要管理多个英雄。我们将扩展《英雄指南》应用，让它显示一个英雄列表，
|
||
允许用户选择一个英雄，查看该英雄的详细信息。
|
||
|
||
When you're done with this page, the app should look like this <live-example></live-example>.
|
||
|
||
当我们完成本章时，应用应该是这样的：<live-example></live-example>。
|
||
|
||
|
||
|
||
## Where you left off
|
||
|
||
## 延续上一步教程
|
||
|
||
Before you continue with this page of the Tour of Heroes,
|
||
verify that you have the following structure after [The Hero Editor](tutorial/toh-pt1) page.
|
||
If your structure doesn't match, go back to that page to figure out what you missed.
|
||
|
||
在继续《英雄指南》的第二部分之前，先来检查一下，完成[第一部分](tutorial/toh-pt1)之后，你是否已经有了如下目录结构。如果没有，你得先回到第一部分，看看错过了哪里。
|
||
|
||
|
||
<div class='filetree'>
|
||
|
||
<div class='file'>
|
||
angular-tour-of-heroes
|
||
</div>
|
||
|
||
<div class='children'>
|
||
|
||
<div class='file'>
|
||
src
|
||
</div>
|
||
|
||
<div class='children'>
|
||
|
||
<div class='file'>
|
||
app
|
||
</div>
|
||
|
||
<div class='children'>
|
||
|
||
<div class='file'>
|
||
app.component.ts
|
||
</div>
|
||
|
||
<div class='file'>
|
||
app.module.ts
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class='file'>
|
||
main.ts
|
||
</div>
|
||
|
||
<div class='file'>
|
||
index.html
|
||
</div>
|
||
|
||
<div class='file'>
|
||
styles.css
|
||
</div>
|
||
|
||
<div class='file'>
|
||
systemjs.config.js
|
||
</div>
|
||
|
||
<div class='file'>
|
||
tsconfig.json
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class='file'>
|
||
node_modules ...
|
||
</div>
|
||
|
||
<div class='file'>
|
||
package.json
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
## Keep the app transpiling and running
|
||
|
||
## 让应用代码保持转译和运行
|
||
|
||
Enter the following command in the terminal window:
|
||
|
||
在控制台中敲下列命令：
|
||
|
||
|
||
<code-example language="sh" class="code-shell">
|
||
npm start
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
|
||
The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
|
||
|
||
这个命令会在“监听”模式下运行TypeScript编译器，当代码变化时，它会自动重新编译。
|
||
同时，该命令还会在浏览器中启动该应用，并且当代码变化时刷新浏览器。
|
||
|
||
You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
|
||
|
||
在后续构建《英雄指南》过程中，应用能持续运行，而不用中断服务来编译或刷新浏览器。
|
||
|
||
|
||
|
||
## Displaying heroes
|
||
|
||
## 显示我们的英雄
|
||
|
||
To display a list of heroes, you'll add heroes to the view's template.
|
||
|
||
要显示英雄列表，我们就要先往视图模板中添加一些英雄。
|
||
|
||
### Create heroes
|
||
|
||
### 创建英雄
|
||
|
||
Create an array of ten heroes.
|
||
|
||
我们先创建一个由十位英雄组成的数组。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.ts" region="hero-array" title="src/app/app.component.ts (hero array)">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
The `HEROES` array is of type `Hero`, the class defined in the previous page.
|
||
Eventually this app will fetch the list of heroes from a web service, but for now
|
||
you can display mock heroes.
|
||
|
||
`HEROES`是一个由`Hero`类的实例构成的数组，我们在第一部分定义过它。
|
||
我们当然希望从一个 Web 服务中获取这个英雄列表，但别急，我们得把步子迈得小一点，先用一组模拟出来的英雄。
|
||
|
||
### Expose heroes
|
||
|
||
### 暴露英雄
|
||
|
||
Create a public property in `AppComponent` that exposes the heroes for binding.
|
||
|
||
我们在`AppComponent`上创建一个公共属性，用来暴露这些英雄，以供绑定。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="hero-array-1" title="app.component.ts (hero array property)">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
The `heroes` type isn't defined because TypeScript infers it from the `HEROES` array.
|
||
|
||
我们并不需要明确定义`heroes`属性的数据类型，TypeScript 能从`HEROES`数组中推断出来。
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
|
||
|
||
The hero data is separated from the class implementation
|
||
because ultimately the hero names will come from a data service.
|
||
|
||
英雄的数据从实现类中分离了出来，因为最终，英雄的名字会来自一个数据服务。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
### Display hero names in a template
|
||
|
||
### 在模板中显示英雄
|
||
|
||
To display the hero names in an unordered list,
|
||
insert the following chunk of HTML below the title and above the hero details.
|
||
|
||
我们还要在模板中创建一个无序列表来显示这些英雄的名字。
|
||
那就在标题和英雄详情之间，插入下面这段 HTML 代码。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-template-1" title="app.component.ts (heroes template)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
Now you can fill the template with hero names.
|
||
|
||
现在，我们有了一个模板。接下来，就用英雄们的数据来填充它。
|
||
|
||
### List heroes with ngFor
|
||
|
||
### 通过 ngFor 来显示英雄列表
|
||
|
||
The goal is to bind the array of heroes in the component to the template, iterate over them,
|
||
and display them individually.
|
||
|
||
我们想要把组件中的`heroes`数组绑定到模板中，迭代并逐个显示它们。
|
||
|
||
Modify the `<li>` tag by adding the built-in directive `*ngFor`.
|
||
|
||
首先，修改`<li>`标签，往上添加内置指令`*ngFor`。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-ngfor-1" title="app.component.ts (ngFor)">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
|
||
|
||
The (`*`) prefix to `ngFor` is a critical part of this syntax.
|
||
It indicates that the `<li>` element and its children
|
||
constitute a master template.
|
||
|
||
`ngFor`的`*`前缀表示`<li>`及其子元素组成了一个主控模板。
|
||
|
||
The `ngFor` directive iterates over the component's `heroes` array
|
||
and renders an instance of this template for each hero in that array.
|
||
|
||
`ngFor`指令在`AppComponent.heroes`属性返回的`heroes`数组上迭代，并输出此模板的实例。
|
||
|
||
The `let hero` part of the expression identifies `hero` as the template input variable,
|
||
which holds the current hero item for each iteration.
|
||
You can reference this variable within the template to access the current hero's properties.
|
||
|
||
引号中赋值给`ngFor`的那段文本表示“*从`heroes`数组中取出每个英雄，存入一个局部的`hero`变量，并让它在相应的模板实例中可用*”。
|
||
|
||
Read more about `ngFor` and template input variables in the
|
||
[Showing an array property with *ngFor](guide/displaying-data#ngFor) section of the
|
||
[Displaying Data](guide/displaying-data) page and the
|
||
[ngFor](guide/template-syntax#ngFor) section of the
|
||
[Template Syntax](guide/template-syntax) page.
|
||
|
||
要学习更多关于`ngFor`和模板输入变量的知识，参见[显示数据](guide/displaying-data)一章的[用*ngFor显示数组属性](guide/displaying-data#ngFor)和
|
||
[模板语法](guide/template-syntax)章的[ngFor](guide/template-syntax#ngFor)。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
Within the `<li>` tags, add content
|
||
that uses the `hero` template variable to display the hero's properties.
|
||
|
||
接着，我们在`<li>`标签中插入一些内容，以便使用模板变量`hero`来显示英雄的属性。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-for" title="app.component.ts (ngFor template)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
When the browser refreshes, a list of heroes appears.
|
||
|
||
当浏览器刷新时，我们就看到了英雄列表。
|
||
|
||
### Style the heroes
|
||
|
||
### 给我们的英雄们“美容”
|
||
|
||
Users should get a visual cue of which hero they are hovering over and which hero is selected.
|
||
|
||
当用户的鼠标划过英雄或选中一个英雄时，我们得让他/她看起来醒目一点。
|
||
|
||
To add styles to your component, set the `styles` property on the `@Component` decorator
|
||
to the following CSS classes:
|
||
|
||
要想给我们的组件添加一些样式，请把`@Component`装饰器的`styles`属性设置为下列 CSS 类：
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.ts" region="styles" title="src/app/app.component.ts (styles)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
Remember to use the backtick notation for multi-line strings.
|
||
|
||
注意，我们又使用了反引号语法来书写多行字符串。
|
||
|
||
Adding these styles makes the file much longer. In a later page you'll move the styles to a separate file.
|
||
|
||
添加这些样式会让此文件变得更长。在后面的章节中，我们将会把这些样式移到单独的文件中去。
|
||
|
||
When you assign styles to a component, they are scoped to that specific component.
|
||
These styles apply only to the `AppComponent` and don't affect the outer HTML.
|
||
|
||
当我们为一个组件指定样式时，它们的作用域将仅限于该组件。
|
||
上面的例子中，这些样式只会作用于`AppComponent`组件，而不会“泄露”到外部 HTML 中。
|
||
|
||
The template for displaying heroes should look like this:
|
||
|
||
用于显示英雄们的模板应该是这样的：
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-styled" title="src/app/app.component.ts (styled heroes)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
|
||
## Selecting a hero
|
||
|
||
## 选择英雄
|
||
|
||
The app now displays a list of heroes as well as a single hero in the details view. But
|
||
the list and the details view are not connected.
|
||
When users select a hero from the list, the selected hero should appear in the details view.
|
||
This UI pattern is known as "master/detail."
|
||
In this case, the _master_ is the heroes list and the _detail_ is the selected hero.
|
||
|
||
我们的应用已经有了英雄列表和单个英雄的详情视图。
|
||
但列表和单独的英雄之间还没有任何关联。
|
||
我们希望用户在列表中选中一个英雄，然后让这个被选中的英雄出现在详情视图中。
|
||
这种 UI 布局模式，通常被称为“主从结构”。
|
||
在这个例子中，主视图是英雄列表，从视图则是被选中的英雄。
|
||
|
||
Next you'll connect the master to the detail through a `selectedHero` component property,
|
||
which is bound to a click event.
|
||
|
||
接下来，我们要通过组件中的一个`selectedHero`属性来连接主从视图，它被绑定到了点击事件上。
|
||
|
||
### Handle click events
|
||
|
||
### 处理点击事件
|
||
|
||
Add a click event binding to the `<li>` like this:
|
||
|
||
我们再往`<li>`元素上插入一句点击事件的绑定代码：
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-click" title="app.component.ts (template excerpt)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
The parentheses identify the `<li>` element's `click` event as the target.
|
||
The `onSelect(hero)` expression calls the `AppComponent` method, `onSelect()`,
|
||
passing the template input variable `hero`, as an argument.
|
||
That's the same `hero` variable you defined previously in the `ngFor` directive.
|
||
|
||
圆括号标识`<li>`元素上的`click`事件是绑定的目标。
|
||
等号右边的`onSelect(hero)`表达式调用`AppComponent`的`onSelect()`方法，并把模板输入变量`hero`作为参数传进去。
|
||
它是我们前面在`ngFor`指令中定义的那个`hero`变量。
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
|
||
|
||
Learn more about event binding at the
|
||
[User Input](guide/user-input) page and the
|
||
[Event binding](guide/template-syntax#event-binding) section of the
|
||
[Template Syntax](guide/template-syntax) page.
|
||
|
||
关于事件绑定的更多内容，参见：
|
||
[用户输入](guide/user-input)页 和
|
||
[模板语法](guide/template-syntax)页的[事件绑定](guide/template-syntax#event-binding)节。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
### Add a click handler to expose the selected hero
|
||
|
||
### 添加点击处理器以暴露选中的英雄
|
||
|
||
You no longer need the `hero` property because you're no longer displaying a single hero; you're displaying a list of heroes.
|
||
But the user will be able to select one of the heroes by clicking on it.
|
||
So replace the `hero` property with this simple `selectedHero` property:
|
||
|
||
我们不再需要`AppComponent`的`hero`属性，因为不需要再显示单个的英雄，我们只需要显示英雄列表。但是用户可以点选一个英雄。
|
||
所以我们要把`hero`属性**替换**成`selectedHero`属性。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.ts" region="selected-hero" title="src/app/app.component.ts (selectedHero)">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
The hero names should all be unselected before the user picks a hero, so
|
||
you won't initialize the `selectedHero` as you did with `hero`.
|
||
|
||
在用户选取一个英雄之前，所有的英雄名字都应该是未选中的。所以我们不希望像`hero`一样初始化`selectedHero`变量。
|
||
|
||
Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks.
|
||
|
||
现在，**添加一个`onSelect`方法**，用于将用户点击的英雄赋给`selectedHero`属性。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.ts" region="on-select" title="src/app/app.component.ts (onSelect)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
The template still refers to the old `hero` property.
|
||
Bind to the new `selectedHero` property instead as follows:
|
||
|
||
我们将把所选英雄的详细信息显示在模板中。目前，它仍然引用之前的`hero`属性。
|
||
我们这就修改模板，让它绑定到新的`selectedHero`属性。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-details" title="app.component.ts (template excerpt)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
### Hide the empty detail with ngIf
|
||
|
||
### 使用 ngIf 隐藏空的详情
|
||
|
||
When the app loads, `selectedHero` is undefined.
|
||
The selected hero is initialized when the user clicks a hero's name.
|
||
Angular can't display properties of the undefined `selectedHero` and throws the following error,
|
||
visible in the browser's console:
|
||
|
||
当应用加载时，我们会看到一个英雄列表，但还没有任何英雄被选中。
|
||
`selectedHero`属性是`undefined`。
|
||
因此，我们会看到浏览器控制台中出现下列错误：
|
||
|
||
|
||
<code-example format="nocode">
|
||
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
Although `selectedHero.name` is displayed in the template,
|
||
you must keep the hero detail out of the DOM until there is a selected hero.
|
||
|
||
虽然我们要在模板中显示的是`selectedHero.name`，但在选中了一个英雄之前，我们必须让这些英雄详情留在DOM之外。
|
||
|
||
Wrap the HTML hero detail content of the template with a `<div>`.
|
||
Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
|
||
|
||
我们可以把模板中的英雄详情内容区放在一个`<div>`中。
|
||
然后，添加一个`ngIf`内置指令，把`ngIf`的值设置为组件的`selectedHero`属性。
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-if" title="src/app/app.component.ts (ngIf)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
<div class="alert is-critical">
|
||
|
||
|
||
|
||
Don't forget the asterisk (`*`) in front of `ngIf`.
|
||
|
||
别忘了`ngIf`前的星号 (`*`)。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
The app no longer fails and the list of names displays again in the browser.
|
||
|
||
应用不再出错，而名字列表也再次显示在浏览器中。
|
||
|
||
|
||
When there is no selected hero, the `ngIf` directive removes the hero detail HTML from the DOM.
|
||
There are no hero detail elements or bindings to worry about.
|
||
|
||
当没有选中英雄时，`ngIf`指令会从 DOM 中移除表示英雄详情的这段 HTML 。
|
||
没有了表示英雄详情的元素，也就不用担心绑定问题。
|
||
|
||
When the user picks a hero, `selectedHero` becomes defined and
|
||
`ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
|
||
|
||
当用户选取了一个英雄，`selectedHero`变成了“已定义的”值，于是`ngIf`把英雄详情加回 DOM 中，并计算它所嵌套的各种绑定。
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
|
||
|
||
Read more about `ngIf` and `ngFor` in the
|
||
[Structural Directives](guide/structural-directives) page and the
|
||
[Built-in directives](guide/template-syntax#directives) section of the
|
||
[Template Syntax](guide/template-syntax) page.
|
||
|
||
|
||
要了解更多`ngIf`，`ngFor`和其它结构型指令的信息，参见
|
||
[结构型指令](guide/structural-directives)和
|
||
[模板语法](guide/template-syntax)章的[内置指令](guide/template-syntax#directives)部分。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
### Style the selected hero
|
||
|
||
### 给所选英雄添加样式
|
||
|
||
While the selected hero details appear below the list, it's difficult to identify the selected hero within the list itself.
|
||
|
||
我们在下面的详情区看到了选中的英雄，但是我们还是没法在上面的列表区快速定位这位英雄。
|
||
|
||
In the `styles` metadata that you added above, there is a custom CSS class named `selected`.
|
||
To make the selected hero more visible, you'll apply this `selected` class to the `<li>` when the user clicks on a hero name.
|
||
For example, when the user clicks "Magneta", it should render with a distinctive but subtle background color
|
||
like this:
|
||
|
||
在我们前面添加的`styles`元数据中，有一个名叫`selected`的自定义CSS类。
|
||
要想让选中的英雄更加醒目，当用户点击一个英雄名字时，我们要为`<li>`添加`selected`类。
|
||
例如，当用户点击“Magneta”时，它应该使用不一样的醒目的背景色。
|
||
|
||
|
||
<figure>
|
||
<img src='generated/images/guide/toh/heroes-list-selected.png' alt="选中的英雄">
|
||
</figure>
|
||
|
||
|
||
|
||
In the template, add the following `[class.selected]` binding to the `<li>`:
|
||
|
||
在这个模板中，往`<li>`上添加一个`[class.selected]`绑定：
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-1" title="app.component.ts (setting the CSS class)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
When the expression (`hero === selectedHero`) is `true`, Angular adds the `selected` CSS class.
|
||
When the expression is `false`, Angular removes the `selected` class.
|
||
|
||
当表达式(`hero === selectedHero`)为`true`时，Angular会添加一个CSS类`selected`。为`false`时则会移除`selected`类。
|
||
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
|
||
|
||
Read more about the `[class]` binding in the [Template Syntax](guide/template-syntax#ngClass "Template syntax: NgClass") guide.
|
||
|
||
关于`[class]`绑定的更多信息，参见[模板语法](guide/template-syntax#ngClass "Template syntax: NgClass")。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
The final version of the `<li>` looks like this:
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-2" title="app.component.ts (styling each hero)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
After clicking "Magneta", the list should look like this:
|
||
|
||
浏览器重新加载了我们的应用。
|
||
我们选中英雄 Magneta，通过背景色的变化，它被清晰的标记出来。
|
||
|
||
|
||
<figure>
|
||
<img src='generated/images/guide/toh/heroes-list-1.png' alt="英雄列表应用的输出">
|
||
</figure>
|
||
|
||
|
||
|
||
Here's the complete `app.component.ts` as of now:
|
||
|
||
完整的`app.component.ts`文件如下：
|
||
|
||
|
||
<code-example path="toh-pt2/src/app/app.component.ts" title="src/app/app.component.ts">
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
|
||
## The road you've travelled
|
||
|
||
## 已走的路
|
||
|
||
Here's what you achieved in this page:
|
||
|
||
在本章中，我们完成了以下内容：
|
||
|
||
* The Tour of Heroes app displays a list of selectable heroes.
|
||
|
||
我们的《英雄指南》现在显示一个可选英雄的列表
|
||
|
||
* You added the ability to select a hero and show the hero's details.
|
||
|
||
我们可以选择英雄，并显示这个英雄的详情
|
||
|
||
* You learned how to use the built-in directives `ngIf` and `ngFor` in a component's template.
|
||
|
||
我们学会了如何在组件模板中使用内置的`ngIf`和`ngFor`指令
|
||
|
||
## The road ahead
|
||
|
||
## 前方的路
|
||
|
||
You've expanded the Tour of Heroes app, but it's far from complete.
|
||
An app shouldn't be one monolithic component.
|
||
In the [next page](tutorial/toh-pt3 "Multiple Components"), you'll split the app into subcomponents and make them work together.
|
||
|
||
我们的《英雄指南》长大了，但还远远不够完善。
|
||
我们显然不能把整个应用都放进一个组件中。
|
||
我们将在[下一章](tutorial/toh-pt3)把它拆分成一系列子组件，然后教它们协同工作。 |