Angular2.js——多个组件

目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中，我们将来可能会受到新的需求，修改这个组件又不能影响另外一个。然而每一次更改都会给这两个组件带来风险和双倍的测试负担，没有任何好处。如果我们需要在其他地方复用英雄详情组件，英雄列表组件也会跟着混进去。

我们当前的组件违反了单一职责原则，我们需要把英雄详情拆分成一个独立的组件。

1、拆分英雄详情组件

在app目录下创建一个名叫hero-detail-component.ts的文件，并且创建HeroDetailComponent组件，代码如下：

import { Component,Input } from '@angular/core';     //Component装饰器，Input输入装饰器
import {Heroo} from './hero';
@Component({
selector: 'my-hero-detail',

})
export class HeroDetailComponent {
   
}

命名规则：我们希望一眼能看出哪些是组件，哪些是文件包含组件，我们所有的组件名都以.component结尾，我们组建的文件名都以.component结尾。

2、英雄的详情模板

接下来我们需要把英雄详情的模板放到这个组件中来：

 

import { Component,Input } from '@angular/core';
@Component({
selector: 'my-hero-detail',
template: `
    <div *ngIf="hero">
        <h2>{{hero.name}}详细信息</h2>
        <div><label>id:</label>{{hero.id}}</div>
        <div>
            <label>姓名：</label>
            <input [(ngModel)]="hero.name" placeholder="name">
        </div>
    </div>
    `
})
export class HeroDetailComponent {
   
}

 

3、添加hero属性

我们在app.component.ts和hero-detail-component.ts中都需要引用Heroo这个类，所以我们把这个类新建一个文件夹hero.ts

export class Heroo{
    id:number;
    name:string;
}

同时我们在两个组件中AppComponent和HeroDetailComponent都导出这个类

import {Heroo} from './hero';

还得告诉HeroDetailComponent显示那个英雄，谁告诉他呢？当然是AppComponent了。

AppComponent确实知道该显示哪个英雄，用户从列表中选中的那个，用户选择的英雄在他的selectrdHero属性中。

我们需要在AppComponent模板中添加：将hero属性复制为selectedHero属性，使得AppComponent组件和HeroDetailComponent组件形成联系。

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

同时修改hero-detail-component.ts

export class HeroDetailComponent {
    @Input()
    hero:Heroo;//带有@Input()装饰器的输入属性
}

4、更新AppModule

 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent1 } from './app.component';
import {HeroDetailComponent} from './hero-detail.component';
@NgModule({
imports: [
    BrowserModule,
    FormsModule
],
declarations: [
    AppComponent1,
    HeroDetailComponent
],
bootstrap: [ AppComponent1 ]
})
export class AppModule { }

 

这样，我们创建了第一个可复用组件！

我们可以在应用中的任何地方使用这个HeroDetailComponent组件来显示英雄详情。

 

参考：https://angular.cn/docs/ts/latest/tutorial/toh-pt3.html