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

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

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

---

父组件app.component.ts文件

import { Component } from '@angular/core';
// 引入子组件hero-detail
import { 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';
//导入 HeroProperty
import { 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 { }

---

效果图