Merge branch 'master' of https://github.com/angular-live/angular.io
This commit is contained in:
Rex
commit
0012b34c6d
|
|
@ -210,20 +210,20 @@ include _util-fns
|
|||
.l-main-section
|
||||
:marked
|
||||
## dash-case
|
||||
## 横杠分隔命名法
|
||||
## 中线命名法
|
||||
.l-sub-section
|
||||
:marked
|
||||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
||||
|
||||
使用横杠来分隔每个单词来编写词汇或短语的方法叫做横杠分隔命名法（dash-case）。
|
||||
使用中线来分隔每个单词来编写词汇或短语的方法叫做中线命名法（dash-case）。
|
||||
|
||||
Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
|
||||
|
||||
指令的选择器和文件名通常都是通过横杠分隔命名法来命名的。比如`my-app` 和 `hero-list.component.ts`。
|
||||
指令的选择器和文件名通常都是通过中线命名法来命名的。比如`my-app` 和 `hero-list.component.ts`。
|
||||
|
||||
This form is also known as [kebab-case](#kebab-case).
|
||||
|
||||
这种命名法也被叫做可芭比命名法[kebab-case](#kebab-case)。
|
||||
这种命名法也被称为烤串命名法[kebab-case](#kebab-case)。
|
||||
|
||||
:marked
|
||||
## Data Binding
|
||||
|
|
@ -587,20 +587,20 @@ include _util-fns
|
|||
<a id="K"></a>
|
||||
:marked
|
||||
## kebab-case
|
||||
## 可芭比命名法
|
||||
## 烤串命名法
|
||||
.l-sub-section
|
||||
:marked
|
||||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
||||
|
||||
使用横杠来分割每个单词的编写复合词或短语的命名方法。
|
||||
使用中线来分割每个单词的编写复合词或短语的命名方法。
|
||||
|
||||
Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and the `hero-list.component.ts`.
|
||||
|
||||
指令选择器和文件名字等一般都用可芭比命名法Kebab-case。比如`my-app`和`hero-list.component.ts`。
|
||||
指令选择器和文件名字等一般都用烤串命名法Kebab-case。比如`my-app`和`hero-list.component.ts`。
|
||||
|
||||
This form is also known as [dash-case](#dash-case).
|
||||
|
||||
这种命名法也被叫做[横杠命名法dash-case](#dash-case)
|
||||
这种命名法也被叫做[中线命名法dash-case](#dash-case)
|
||||
|
||||
<a id="L"></a>
|
||||
.l-main-section
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ include ../_util-fns
|
|||
.l-main-section
|
||||
:marked
|
||||
## Where We Left Off
|
||||
## 我们刚刚到哪儿了
|
||||
## 我们从哪里出发
|
||||
Before we continue with Part 2 of the Tour of Heroes,
|
||||
let’s verify we have the following structure after [Part 1](./toh-pt1.html).
|
||||
If not, we’ll need to go back to Part 1 and figure out what we missed.
|
||||
|
||||
在继续《英雄之旅》的第二部分之前，我们先检查一下，完成第一部分之后，你是否已经有了如下目录结构，如果没有，你得先回到第一部分，看看缺了哪里。
|
||||
在继续《英雄之旅》的第二部分之前，我们先检查一下，完成第一部分之后，你是否已经有了如下目录结构。如果没有，你得先回到第一部分，看看缺了哪里。
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
|
|
|
|||
|
|
@ -4,12 +4,20 @@ include ../_util-fns
|
|||
Our app is growing.
|
||||
Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable.
|
||||
|
||||
我们的应用继续成长。
|
||||
这次的例子将依次展示：复用组件、给组件传入数据、创建高复用度的软件资产。我们先把英雄列表从英雄详情中分离出来，并且让详情组件可被复用。
|
||||
|
||||
[Run the live example for part 3](/resources/live-examples/toh-3/ts/plnkr.html)
|
||||
|
||||
[运行第三部分的鲜活范例](/resources/live-examples/toh-3/ts/plnkr.html)
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Where We Left Off
|
||||
## 我们从哪里出发
|
||||
Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
|
||||
|
||||
在继续《英雄之旅》之前，我们先检查一下，完成第一部分之后，你是否已经有了如下目录结构。如果没有，你得先回到第一部分，看看缺了哪里。
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
|
|
@ -26,15 +34,21 @@ include ../_util-fns
|
|||
.file typings.json
|
||||
:marked
|
||||
### Keep the app transpiling and running
|
||||
### 让应用代码保持转译和运行
|
||||
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
|
||||
|
||||
我们要启动TypeScript编译器，它会监视文件变更，并且启动开发服务器。我们只要敲：
|
||||
|
||||
code-example(format="." language="bash").
|
||||
npm start
|
||||
|
||||
:marked
|
||||
This will keep the application running while we continue to build the Tour of Heroes.
|
||||
|
||||
这个命令会在我们构建《英雄之旅》的时候让应用得以持续运行。
|
||||
|
||||
## Making a Hero Detail Component
|
||||
## 制作英雄详情组件
|
||||
Our heroes list and our hero details are in the same component in the same file.
|
||||
They're small now but each could grow.
|
||||
We are sure to receive new requirements for one and not the other.
|
||||
|
|
@ -42,78 +56,130 @@ code-example(format="." language="bash").
|
|||
If we had to reuse the hero details elsewhere in our app,
|
||||
the heroes list would tag along for the ride.
|
||||
|
||||
我们的英雄列表和英雄详情目前位于同一个文件的同一个组件中。
|
||||
现在它们还很小，但很快它们都会长大。
|
||||
我们将来肯定会收到新需求：针对这一个，却不能影响另一个。
|
||||
然而，每一个更改都会给这两个组件带来风险，并且带来双倍的测试负担，却不会带来好处。
|
||||
如果我们不得不在此应用之外复用英雄详情组件，那么英雄列表组件也会跟着混进去。
|
||||
|
||||
Our current component violates the
|
||||
[Single Responsibility Principle](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
|
||||
It's only a tutorial but we can still do things right —
|
||||
especially if doing them right is easy and we learn how to build Angular apps in the process.
|
||||
|
||||
我们这个组件违反了[单一职责原则](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html)。
|
||||
虽然这只是一个教程，但我们还是要坚持做正确的事 —— 况且，做正确的事如此容易，我们何乐而不为呢？别忘了，我们正在学习的就是如何构建真正的Angular应用。
|
||||
|
||||
Let’s break the hero details out into its own component.
|
||||
|
||||
我们来把英雄详情拆分成一个独立的组件。
|
||||
|
||||
### Separating the Hero Detail Component
|
||||
### 拆分英雄详情组件
|
||||
Add a new file named `hero-detail.component.ts` to the `app` folder and create `HeroDetailComponent` as follows.
|
||||
在`app`目录下添加一个名叫`hero-detail.component.ts`的文件，并且创建`HeroDetailComponent`。代码如下：
|
||||
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'hero-detail.component.ts (initial version)')(format=".")
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'v1', 'hero-detail.component.ts (初始版本)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Naming conventions
|
||||
### 命名约定
|
||||
We like to identify at a glance which classes are components and which files contain components.
|
||||
|
||||
我们希望一眼就能看出哪个类是组件，以及哪个文件包含组件。
|
||||
|
||||
Notice that we have an `AppComponent` in a file named `app.component.ts` and our new
|
||||
`HeroDetailComponent` is in a file named `hero-detail.component.ts`.
|
||||
|
||||
注意，在名叫`app.component.ts`的文件中有一个`AppComponent`组件，在名叫`hero-detail.component.ts`的文件中有一个`HeroDetailComponent`组件。
|
||||
|
||||
All of our component names end in "Component". All of our component file names end in ".component".
|
||||
|
||||
我们的所有组件名都以`Component`结尾。所有组件的文件名都以`.component`结尾。
|
||||
|
||||
We spell our file names in lower dash case (AKA "kebab-case") so we don't worry about
|
||||
case sensitivity on the server or in source control.
|
||||
|
||||
这里我们使用小写中线命名法（也叫烤串命名法），所以我们不用担心它在服务器或者版本控制系统中出现大小写问题。
|
||||
<!-- TODO
|
||||
.l-sub-section
|
||||
:marked
|
||||
Learn more about naming conventions in the chapter [Naming Conventions]
|
||||
|
||||
要了解命名约定的更多知识，参见[命名约定]一章
|
||||
:marked
|
||||
-->
|
||||
:marked
|
||||
We begin by importing the `Component` and `Input` decorators from Angular because we're going to need them soon.
|
||||
|
||||
一开始，我们先从Angular中导入`Component`和`Input`装饰器，因为马上就会用到它们。
|
||||
|
||||
We create metadata with the `@Component` decorator where we
|
||||
specify the selector name that identifies this component's element.
|
||||
Then we export the class to make it available to other components.
|
||||
|
||||
我们使用`@Component`装饰器创建元数据，在元数据中，我们指定选择器的名字，用以标记此组件的元素。
|
||||
然后，我们导出这个类，以便其他组件可以使用它。
|
||||
|
||||
When we finish here, we'll import it into `AppComponent` and create a corresponding `<my-hero-detail>` element.
|
||||
|
||||
做完这些，我们把它导入`AppComponent`组件，并且创建相应的`<my-hero-detail>`元素。
|
||||
:marked
|
||||
#### Hero Detail Template
|
||||
#### 英雄详情模板
|
||||
At the moment, the *Heroes* and *Hero Detail* views are combined in one template in `AppComponent`.
|
||||
Let’s **cut** the *Hero Detail* content from `AppComponent` and **paste** it into the new template property of `HeroDetailComponent`.
|
||||
|
||||
目前，在`AppComponent`中 *英雄列表* 和 *英雄详情* 视图被组合在同一个模板中。
|
||||
我们从`AppComponent`中 **剪切** 出 *英雄详情* 的内容，并且粘贴到`HeroDetailComponent`组件的`template`属性中。
|
||||
|
||||
We previously bound to the `selectedHero.name` property of the `AppComponent`.
|
||||
Our `HeroDetailComponent` will have a `hero` property, not a `selectedHero` property.
|
||||
So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
|
||||
The result looks like this:
|
||||
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'hero-detail.component.ts (template)')(format=".")
|
||||
以前我们绑定到了`AppComponent`的`selectedHero.name`属性中。
|
||||
我们的`HeroDetailComponent`组件将会有一个`hero`属性，而不是`selectedHero`属性。
|
||||
所以，我们把模板中的所有`selectedHero`替换为`hero`。只要改这些就够了。
|
||||
最终结果如下所示：
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'hero-detail.component.ts (模板)')(format=".")
|
||||
|
||||
:marked
|
||||
Now our hero detail layout exists only in the `HeroDetailComponent`.
|
||||
|
||||
现在，我们的英雄详情布局只存在于`HeroDetailComponent`组件中。
|
||||
|
||||
#### Add the *hero* property
|
||||
#### 添加 *hero* 属性
|
||||
Let’s add that `hero` property we were talking about to the component class.
|
||||
|
||||
我们这就添加刚刚所说的`hero`属性到组件类中。
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
|
||||
:marked
|
||||
Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app.component.ts` file.
|
||||
We have two components, each in their own file, that need to reference the `Hero` class.
|
||||
|
||||
啊哦！我们定义的`hero`属性是`Hero`类型的，但是我们的`Hero`类还在`app.component.ts`文件中。
|
||||
我们有了两个组件，它们都有各自的文件，并且都需要引用`Hero`类。
|
||||
|
||||
We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
|
||||
|
||||
要想解决这个问题，我们也从`app.component.ts`文件中把`Hero`类移到属于它自己的`hero.ts`文件中。
|
||||
|
||||
+makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (Exported Hero class)')(format=".")
|
||||
+makeExample('toh-3/ts/app/hero.ts', null, 'hero.ts (导出Hero类)')(format=".")
|
||||
|
||||
:marked
|
||||
We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files.
|
||||
Add the following import statement near the top of both `app.component.ts` and `hero-detail.component.ts`.
|
||||
|
||||
我们从`hero.ts`中导出`Hero`类，这是因为我们需要从这些组件文件中引用它。
|
||||
在`app.component.ts`和`hero-detail.component.ts`的顶部添加下列import语句：
|
||||
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts and app.component.ts (Import the Hero class)')
|
||||
+makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import', 'hero-detail.component.ts与app.component.ts(导入Hero类)')
|
||||
|
||||
:marked
|
||||
#### The *hero* property is an ***input***
|
||||
#### *hero* 属性是一个 ***输入***
|
||||
|
||||
The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`!
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue