(五)Angular4 英雄征途HeroConquest-多组件开发

多组件开发：将组建拆分，成多个组建，想成一父多子的架构，便于大型项目的维护与开发以及迭代。

---

父组件app.component.ts文件

import { Component } from '@angular/core';// 引入子组件hero-detailimport { HeroDetailComponent} from './hero-detail.component';// 引入非组件的模块化属性import { HeroArray } from './herodata';import { HeroProperty} from './heroproperty';@Component({// @Component装饰器为组件提供了Angular元数据。// CSS选择器的名字app-hero-detail会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。// template后面，我们会把<app-hero-detail>添加到AppComponent的模板中。// 这就是所谓的自定义标签  selector: 'app-root',  template: `<h1>{{title}}</h1><!--上一节代码begin-->  <br>  <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -------{{from}}</h2>  <ul>  <li>  <div><label>ID:</label>{{hero.id}}&nbsp;<label> name:</label>{{hero.name}}</div>  </li>  </ul>  <div>  <label>name: </label>  <input [(ngModel)]="hero.name" >  <label>ID: </label>  <input  [ngModel]="hero.id" (ngModelChange)="hero.id=$event"></div><div><ul class="heroes"><li *ngFor="let onehero of Heros" (click)="onSelect(onehero)" [class.selected]="onehero===selectedHero"><span class="badge">ID:{{onehero.id}}</span>&nbsp;{{onehero.name}}</li></ul></div ><!--上一节代码end--><!--本节主要改动的代码begin--><app-hero-detail [DetailHero]="selectedHero"></app-hero-detail><!--此处将selectedHero的值通过DetailHero传入到子组件hero-detail中去--><!--此处的app-hero-detail标签便是子组件的Component装饰器下的元数据的selector属性的定义--><!--本节主要改动的代码end-->  `  ,  styleUrls: ['./app.component.css']})export class AppComponent {  title = 'My conquest is the sea of stars.';  from = 'Reinhard von Lohengramm';  hero: HeroProperty = {    id: 9527,    name: 'Lee',  };  Heros = HeroArray;  selectedHero: HeroProperty;  onSelect(each: HeroProperty): void {    this.selectedHero = each;  }}

---

子组件hero-detail.component.ts文件

//导入 Input装饰器import { Component, Input } from '@angular/core';//导入 HeroPropertyimport { HeroProperty} from './heroproperty';// @Component装饰器为组件提供了Angular元数据。// CSS选择器的名字hero-detail会匹配元素的标签名，// 用于在父组件的模板中标记出当前组件的位置。// 后面我们会把<hero-detail>添加到AppComponent的模板中。@Component({  selector: 'app-hero-detail',  <!--在父组件以标签的形式引入子组件的标签字段-->  template: `  <!--herodetail--><div *ngIf="DetailHero"><h2>{{DetailHero.name}} details!</h2><label>id: </label>{{DetailHero.id}}<div>    <label>name: </label>    <input [(ngModel)]="DetailHero.name" placeholder="name"/></div></div><!--herodetail-->  `,})export class HeroDetailComponent {  @Input() DetailHero: HeroProperty;  // 利用Input装饰器来表明 DetailHero是父组件输入过来的，赋有输入属性}

herodata.ts文件

import { HeroProperty} from './heroproperty';export const HeroArray: HeroProperty[] = [  { id: 1, name: 'Asimov' },  { id: 2, name: 'IronMan' },  { id: 3, name: 'Gen' },  { id: 4, name: 'AnglovLee' }];//export 是可导出的声明关键字，const是声明块级作用于可见的变量属于ES2016规范//ES2015用的是let更早用的是var

heroproperty.ts

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

app.module.ts

要在此处声明引入子组件，把HeroDetailComponent添加到该模块的declarations数组中。

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 { }

---

效果图