创建一个新的Angular组件，并将它展示出来
继学习笔记3以后，创建的应用程序有了标题，现在要创建一个新的组件来显示hero的信息，并将它们展示出来。
1.新建一个新的Angular组件
在命令行中(注意要切换都项目路径下，如使用Webstorm在下方的Terminal中直接输入命令即可)使用 Angular CLI 创建一个名为 heroes 的新组件。
ng generate component heroes执行完以后会提示：
这个过程中：CLI 创建了一个新的文件夹 src/app/heroes/，并生成了 HeroesComponent 的三个文件。
CLI 自动生成了三个元数据属性：
打开HeroesComponent 的类文件（heroes.component.ts）：
-
selector— 组件的选择器（CSS 元素选择器） -
templateUrl— 组件模板文件的位置。
- styleUrls— 组件私有 CSS 样式表文件的位置。
CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。
ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。
始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。
2.在新建的组件中添加一个属性
- 在
HeroesComponent的类文件（heroes.component.ts）中添加一个属性
hero = 'Windstorm';- 在
HeroesComponent的模板文件（heroes.component.html）中展示这个属性
{{hero}}-
显示
HeroesComponent视图
在heroes组件的类文件（heroes.component.ts）中selector（组件的选择器）中的：“app-heroes”就是这个heroes组件的元素选择器，所以显示heroes组件，将<app-heroes> 元素添加到 AppComponent 的模板文件（app.component.html）中就可以了。
在src/app/app.component.html中：
<h1>{{title}}</h1>
<app-heroes></app-heroes>保存以后，浏览器自动刷新，出现一下界面：
3.创建Hero类
切换到src/app，命令行中(注意要切换都项目路径下，如使用Webstorm在下方的Terminal中直接输入命令即可)使用 Angular CLI 创建一个名为 hero 的新类。
wjydeMacBook-Pro:app wjy$ ng generate class hero
CREATE src/app/hero.ts (22 bytes)
这样在src/app目录下，就会有一个Hero类，在Hero类中新增两个属性
export class Hero {
id: number;
name: string;
}
切换到HeroesComponent 类中，导入这个Hero类
import {Hero} from '../hero';将Heroes组件的 hero 属性的类型重构为 Hero。 然后以 1 为 id、以 “Windstorm” 为名字初始化它。
hero: Hero = {
id: 1,
name: 'Windstorm',
};此时，保存以后，页面就会显示的不正常，因为原来的hero属性是string型，现在是Object型。
处理不正常的显示问题
修改HeroesComponent模板中的绑定，以显示英雄的名字，并在详情中显示 id 和 name，
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>保存以后，浏览器刷新就显示正常了；
