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

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

学习目标

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

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

学习时长

五分钟左右

Hero类

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

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

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

/workspace/HelloAngular/src/app # cat app.component.ts
import { 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.ts
import { 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.ts
import { 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 Heroesh2>
  <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以后的能看到的越来越好的特性，值得多花一点时间进行研究。