Angular 4入门教程系列：5：Tour Of Heroes之组件复用

这篇文章将会学习一下如何进行组件的复用，以及组件如何接受输入，父子组件如何进行绑定。

学习目标

通过这篇文章，将会学到如下内容：

• 将原本的一个文件拆成多个
• 多个组件之间如何进行关联

学习时长

五分钟左右

Hero类

将Hero类从app.component.ts中独立出去形成一个新的文件为hero.ts，并export出去。

/workspace/HelloAngular/src/app # cat hero.tsexport class Hero {  id: number;  name: string;}/workspace/HelloAngular/src/app #

同时删除原本定义在app.component.ts中的Hero的定义，然后import Hero进来

/workspace/HelloAngular/src/app # cat app.component.tsimport { Component } from '@angular/core';import { Hero } from './hero'@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  title = 'Tour of Heroes';  heroes = HEROES;  selectedHero: Hero;  onSelect(hero: Hero): void {    this.selectedHero = hero;  }}const HEROES: Hero[] = [  { id: 11, name: 'Mr. Nice' },  { id: 12, name: 'Narco' },  { id: 13, name: 'Bombasto' },  { id: 14, name: 'Celeritas' },  { id: 15, name: 'Magneta' },  { id: 16, name: 'RubberMan' },  { id: 17, name: 'Dynama' },  { id: 18, name: 'Dr IQ' },  { id: 19, name: 'Magma' },  { id: 20, name: 'Tornado' }];/workspace/HelloAngular/src/app # 

HeroDetail组件

将用来显示详细信息的部分进行组件化，只需要传入相关的hero信息即可

只需要注意如下几件事情：

• Hero类需要import进来
• 由于独立了，所以原本SelectedHero也可以直接命名为hero了
• 需要用@Input()来定义hero，使其成为一个输入属性

/workspace/HelloAngular/src/app # cat hero-detail.component.tsimport { Component, Input } from '@angular/core';import { Hero } from './hero';@Component({  selector: 'hero-detail',  template: `    <div *ngIf="hero">      <h2>{{hero.name}} details!</h2>      <div><label>id: </label>{{hero.id}}</div>      <div>        <label>name: </label>        <input [(ngModel)]="hero.name" placeholder="name"/>      </div>    </div>  `})export class HeroDetailComponent {  @Input() hero: Hero;}/workspace/HelloAngular/src/app #

组件声明

组件HeroDetail还需要在模块中进行生命，每个组件都必须在一个Angular模块而且只能在一个Angular模块中进行声明。增加声明之后的app.module.ts代码如下：

/workspace/HelloAngular/src/app # cat app.module.tsimport { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { HeroDetailComponent } from './hero-detail.component'@NgModule({  declarations: [    AppComponent,    HeroDetailComponent  ],  imports: [    BrowserModule,    FormsModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }/workspace/HelloAngular/src/app #

HTML模板

在主模板的底部加入HeroDetail的组件，才能使得两个组件得到连接，需要加入

/workspace/HelloAngular/src/app # cat app.component.html  <h1>{{title}}</h1>  <h2>My Heroes</h2>  <ul class="heroes">    <li *ngFor="let hero of heroes"  [class.selected]="hero === selectedHero" (click)="onSelect(hero)">       <span class="badge">{{hero.id}}</span> {{hero.name}}    </li>   </ul>  <hero-detail [hero]="selectedHero"></hero-detail>/workspace/HelloAngular/src/app #

结果确认

发现和之前仍然一样，因为我们只进行了重构，拆了一下结构而已。

总结

通过这篇文章，我们了解到了Angular中的组件的Input属性和使用方法，以及多个组件如何进行结合使用，组件复用是Angular2以后的能看到的越来越好的特性，值得多花一点时间进行研究。