创建第一个Angular组件！！！

创建英雄列表组件

使用 Angular CLI 创建一个名为 heroes 的心组件

ng generate component heroes

CLI创建了一个新的文件夹 src/app/heroes/, 并生成了三个文件

HeroesComponent的类文件如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。

CLI 自动生成了三更元数据属性：

       1.selector ---组件的选择器

       2.templateUrl ---组件模板文件的位置。

       3.styleUrls ---组件私有CSS样式表文件的位置

selector 用来在父组件的模板中匹配HTML元素的名称，以识别出该组件。

ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngObInit。这里是放置初始化逻辑的好地方

添加 hero 属性

往HeroesComponent中添加一个 hero 属性，用来显示一个名叫 “Wind storm” 的英雄。

heroes.component.ts(hero property)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero = 'Windstorm';

  constructor() { }

  ngOnInit() {
  }

}

打开模板文件 heroes.component.html

{{hero}}

显示 HeroesComponent 视图

要显示 HeroesComponent 你必须把它加到壳组件 AppComponent 的模板中。

别忘了，app-heroes 就是 HeroesComponent 的 元素选择器。 所以，只要把 <app-heroes> 元素添加到 AppComponent 的模板文件中就可以了，就放在标题下方。

src/app/app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

如果 CLI 的 ng serve 命令仍在运行，浏览器就会自动刷新，并且同时显示出应用的标题和英雄的名字。