Angular 主从组件

短命女 2022-01-16 19:17 276阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

此刻，`HeroesComponent` 同时显示了英雄列表和所选英雄的详情。

把所有特性都放在同一个组件中，将会使应用“长大”后变得不可维护。 你要把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流。

本页面中，你将迈出第一步 —— 把英雄详情移入一个独立的、可复用的 `HeroDetailComponent`。

`HeroesComponent` 将仅仅用来表示英雄列表。 `HeroDetailComponent` 将用来表示所选英雄的详情。

你可以访问下面的链接 [https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail][https_github.com_cwiki-us-angular_cwiki-us-angular-tour-of-heroes-master-detail] 从 GitHub 上查看我们提供源代码。

## 制作 `HeroDetailComponent` ##

使用 Angular CLI 生成一个名叫 `hero-detail` 的新组件。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>ng generate component hero-detail</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这个命令会做这些事：

*  创建一个目录 `src/app/hero-detail`.

在这个目录中会生成四个文件：

*  作为组件样式的 CSS 文件。
 *  作为组件模板的 HTML 文件。
 *  存放组件类 `HeroDetailComponent` 的 TypeScript 文件。
 *  `HeroDetailComponent` 类的测试文件。

该命令还会把 `HeroDetailComponent` 添加到 `src/app/app.module.ts` 文件中 `@`[NgModule][] 的 [declarations][] 列表中。

### 编写模板 ###

从 `HeroesComponent` 模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的 `HeroDetailComponent` 模板中。

所粘贴的 HTML 引用了 `selectedHero`。 新的 `HeroDetailComponent` 可以展示*任意*英雄，而不仅仅所选的。因此还要把模板中的所有 `selectedHero` 替换为 `hero`。

完工之后，`HeroDetailComponent` 的模板应该是这样的：

**src/app/hero-detail/hero-detail.component.html**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;div *ngIf=</code><code>"hero"</code><code>&gt;</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;</code><code>&lt;h2&gt;{ {hero.name | uppercase}} Details&lt;/h2&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;div&gt;&lt;span&gt;id: &lt;/span&gt;{ {hero.id}}&lt;/div&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;div&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;label&gt;name:</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input [(ngModel)]=</code><code>"hero.name"</code>&nbsp;<code>placeholder=</code><code>"name"</code><code>/&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/label&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code></p> <p>&nbsp;</p> <p><code>&lt;/div&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 添加 `@`[Input][]`()` hero 属性 ###

`HeroDetailComponent` 模板中绑定了组件中的 `hero` 属性，它的类型是 `Hero`。

打开 `HeroDetailComponent` 类文件，并导入 `Hero` 符号。

**src/app/hero-detail/hero-detail.component.ts (import Hero)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ Hero } from&nbsp;</code><code>'../hero'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`hero` 属性[必须是一个带有 `@Input()` 装饰器的输入属性][Input 1]，因为*外部的* `HeroesComponent` 组件[将会绑定到它][Link 1]。就像这样：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;app-hero-detail [hero]=</code><code>"selectedHero"</code><code>&gt;&lt;/app-hero-detail&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

修改 `@angular/core` 的导入语句，导入 [Input][Input 2] 符号。

**src/app/hero-detail/hero-detail.component.ts (import Input)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ Component, OnInit, Input } from&nbsp;</code><code>'@angular/core'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

添加一个带有 `@`[Input][Input 2]`()` 装饰器的 `hero` 属性。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code><a href="https://my.oschina.net/InPuto" rel="nofollow">@Input</a></code><code>() hero: Hero;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这就是你要对 HeroDetailComponent 类做的唯一一项修改。 没有其它属性，也没有展示逻辑。这个组件所做的只是通过 hero 属性接收一个英雄对象，并显示它。

## 显示 `HeroDetailComponent` ##

`HeroesComponent` 仍然是主从视图。

在你从模板中剪切走代码之前，它自己负责显示英雄的详情。现在它要把这个职责委托给 `HeroDetailComponent` 了。

这两个组件将会具有父子关系。 当用户从列表中选择了某个英雄时，父组件 `HeroesComponent` 将通过把要显示的新英雄发送给子组件 `HeroDetailComponent`，来控制子组件。

你不用修改 `HeroesComponent` *类*，但是要修改它的*模板*。

### 修改 `HeroesComponent` 的模板 ###

`HeroDetailComponent` 的选择器是 `'app-hero-detail'`。 把 `<app-hero-detail>` 添加到 `HeroesComponent` 模板的底部，以便把英雄详情的视图显示到那里。

把 `HeroesComponent.selectedHero` 绑定到该元素的 `hero` 属性，就像这样：

**heroes.component.html (HeroDetail binding)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;app-hero-detail [hero]=</code><code>"selectedHero"</code><code>&gt;&lt;/app-hero-detail&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`[hero]="selectedHero"` 是 Angular 的[属性绑定][Link 2]语法。

这是一种*单向*数据绑定。从 `HeroesComponent` 的 `selectedHero` 属性绑定到目标元素的 `hero` 属性，并映射到了 `HeroDetailComponent` 的 `hero` 属性。

现在，当用户在列表中点击某个英雄时，`selectedHero` 就改变了。 当 `selectedHero` 改变时，*属性绑定*会修改 `HeroDetailComponent` 的 `hero` 属性，`HeroDetailComponent` 就会显示这个新的英雄。

修改后的 `HeroesComponent` 的模板是这样的：

**heroes.component.html**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;h2&gt;My Heroes&lt;/h2&gt;</code></p> <p>&nbsp;</p> <p><code>&lt;ul&nbsp;</code><code>class</code><code>=</code><code>"heroes"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;li *ngFor=</code><code>"let hero of heroes"</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>[</code><code>class</code><code>.selected]=</code><code>"hero === selectedHero"</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>(click)=</code><code>"onSelect(hero)"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;span&nbsp;</code><code>class</code><code>=</code><code>"badge"</code><code>&gt;{ {hero.id}}&lt;/span&gt; { {hero.name}}</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;/li&gt;</code></p> <p><code>&lt;/ul&gt;</code></p> <p>&nbsp;</p> <p><code>&lt;app-hero-detail [hero]=</code><code>"selectedHero"</code><code>&gt;&lt;/app-hero-detail&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

浏览器刷新，应用又像以前一样开始工作了。

## 修改了什么？ ##

像[以前][Link 3]一样，一旦用户点击了一个英雄的名字，该英雄的详情就显示在了英雄列表下方。 现在，`HeroDetailComponent` 负责显示那些详情，而不再是 `HeroesComponent`。

把原来的 `HeroesComponent` 重构成两个组件带来了一些优点，无论是现在还是未来：

1.  你通过缩减 `HeroesComponent` 的职责简化了该组件。
2.  你可以把 `HeroDetailComponent` 改进成一个功能丰富的英雄编辑器，而不用改动父组件 `HeroesComponent`。
3.  你可以改进 `HeroesComponent`，而不用改动英雄详情视图。
4.  将来你可以在其它组件的模板中重复使用 `HeroDetailComponent`。

## 查看最终代码 ##

你的应用应该变成了这样 [在线例子][Link 4] / [下载范例][Link 5]。本页所提及的代码文件如下：

如果你想直接在 stackblitz 运行本页中的例子，请单击链接：[https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail][https_stackblitz.com_github_cwiki-us-angular_cwiki-us-angular-tour-of-heroes-master-detail]

本页中所提及的代码如下：[https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail][https_github.com_cwiki-us-angular_cwiki-us-angular-tour-of-heroes-master-detail]

对应的文件列表和代码链接如下：

<table> 
 <tbody> 
  <tr> 
   <th> <p>文件名</p> </th> 
   <th> <p>源代码</p> </th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>src/app/hero-detail/hero-detail.component.ts</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/hero-detail/hero-detail.component.ts" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/hero-detail/hero-detail.component.ts</a></td> 
  </tr> 
  <tr> 
   <td>src/app/hero-detail/hero-detail.component.html</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/hero-detail/hero-detail.component.html" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/hero-detail/hero-detail.component.html</a></td> 
  </tr> 
  <tr> 
   <td>src/app/heroes/heroes.component.html</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/heroes/heroes.component.html" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/heroes/heroes.component.html</a></td> 
  </tr> 
  <tr> 
   <td>src/app/app.module.ts</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/app.module.ts" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail/blob/master/src/app/app.module.ts</a></td> 
  </tr> 
 </tbody> 
</table>

## 小结 ##

*  你创建了一个独立的、可复用的 `HeroDetailComponent` 组件。
 *  你用[属性绑定][Link 2]语法来让父组件 `HeroesComponent` 可以控制子组件 `HeroDetailComponent`。
 *  你用 [``][Input 1]`@Input` 装饰器来让 `hero` 属性可以在外部的 `HeroesComponent` 中绑定。

[https://www.cwiki.us/pages/viewpage.action?pageId=47841998][https_www.cwiki.us_pages_viewpage.action_pageId_47841998]

转载于:https://my.oschina.net/u/2344080/blog/3055858

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/b2a01f66d9b44ba98778e85bb0031375.png
[https_github.com_cwiki-us-angular_cwiki-us-angular-tour-of-heroes-master-detail]: https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail
[NgModule]: https://angular.ossez.com/api/core/NgModule
[declarations]: https://angular.ossez.com/api/core/NgModule#declarations
[Input]: https://angular.io/api/core/Input
[Input 1]: https://angular.ossez.com/guide/template-syntax#inputs-outputs
[Link 1]: https://angular.ossez.com/tutorial/toh-pt3#heroes-component-template
[Input 2]: https://angular.ossez.com/api/core/Input
[Link 2]: https://angular.ossez.com/guide/template-syntax#property-binding
[Link 3]: https://angular.ossez.com/tutorial/toh-pt2
[Link 4]: https://angular.ossez.com/generated/live-examples/toh-pt3/stackblitz.html
[Link 5]: https://angular.ossez.com/generated/zips/toh-pt3/toh-pt3.zip
[https_stackblitz.com_github_cwiki-us-angular_cwiki-us-angular-tour-of-heroes-master-detail]: https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail
[https_www.cwiki.us_pages_viewpage.action_pageId_47841998]: https://www.cwiki.us/pages/viewpage.action?pageId=47841998