(五)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>
<br>
<h2> -------{{from}}</h2>
<ul>
<li>
<div><label>ID:</label>{{hero.id}} <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> {{onehero.name}}
</li>
</ul>
</div >
<app-hero-detail [DetailHero]="selectedHero"></app-hero-detail>
`
,
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: `
<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>
`,
})
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 { }
效果图
