网站建设后期服务/百度知道推广软件

1. 组件的类名应该是大驼峰形式，并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent。
   
2. 组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

目录结构

hero.component.html

<div padding><h1>{{title}}</h1><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>
</div>

hero.component.scss

my-app {.selected {background-color: #CFD8DC !important;color: white;}.heroes {margin: 0 0 2em 0;list-style-type: none;padding: 0;width: 15em;}.heroes li {cursor: pointer;position: relative;left: 0;background-color: #EEE;margin: 5px 5px 5px 5px;height: 25px;border-radius: 4px;}.heroes li.selected:hover {background-color: #BBD8DC !important;color: white;}.heroes li:hover {color: #607D8B;background-color: #DDD;left: .1em;}.heroes .text {position: relative;top: -3px;}.heroes .badge {display: inline-block;font-size: small;color: white;padding: 5px 5px 5px 5px;background-color: #607D8B;position: relative;height: 25px;margin-right: .8em;border-radius: 4px 0 0 4px;}
}

hero.component.ts

import { Component } from '@angular/core';
import { Hero } from './hero';const HEROES : Hero[] = [{ id : 101, name : '张三'},{ id : 102, name : '李四'},{ id : 103, name : '王五'},{ id : 104, name : '赵六'},{ id : 105, name : '陈七'},{ id : 106, name : '吴八'}];@Component({selector : 'my-app',templateUrl : './hero.component.html'
})
export class HeroComponent{title = '人物列表';heroes = HEROES;selectedHero : Hero;onSelect(hero : Hero) : void {this.selectedHero = hero;}
}

hero.ts

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

hero-details.component.html

<div *ngIf="hero"><h2>大家好：我叫{{hero.name}}！</h2><div><label>编号: </label>{{hero.id}}</div><div><label>姓名: </label><input [(ngModel)]="hero.name" placeholder="name"/></div>
</div>

hero-details.component.ts

import { Component, Input } from  '@angular/core';
import { Hero } from './hero';@Component({selector : 'hero-detail',templateUrl : './hero-details.component.html'
})
export class HeroDateilComponent {@Input() hero : Hero;
}

View