按照官网 实现一个英雄编辑器

先建立一个新的工作空间 angular-tour-of-heroes

    

启动这个应用

    

Angular 组件

所看到的页面就是应用的外壳，该外壳是被一个叫AppComponent 的Angular 组件控制的。

修改标题

打开项目文件，访问/src/app，在该目录下，可以看到AppComponent 壳的三个实现文件：

    - app.component.ts  组件的类代码，用TypeScript 写的

    - app.component.html 组件的模板，用 HTML 写的

    - app.component.css 组件的私有css 样式

 然后将 app.component.ts 中的titile 属性值设为 'tour of heroes' 

 然后打开 app.component.html 清空，改为下面的内容

     

插值绑定 {{}} ，将组件的title 属性绑定到该HTML 元素中。

添加应用样式

为了让应用保持一种一致的外观，angular cli 会生成一个空的 style.css ，可以将全应用级别的样式放进去。如下。即可改变壳的样式。

h1 {
	color: #369;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 250%;
}
h2, h3 {
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
}
body {
	margin: 2em;
}
body, input[text], button {
	color: #888;
	font-family: Cambria, Georgia;
}

* {
	font-family: Arial, Helvetica, sans-serif;
}

 

接下来，英雄编辑器

创建英雄列表组件

使用 Angular cli 创建一个英雄的新组件名叫heroes

    

CLI 创建了一个文件夹 heroes 在src/app目录下

    

heroes.component 的类文件heroes.component.ts 如下：

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() {
  }

}

其中，第一行，从angular 核心库中导入了 Component 和 OnInit。接着为组件装上了@Component 装饰器。

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

CLI 自动生成了三个元数据：

    - selector   组件的选择器（CSS 元素选择器）

    - templateUrl    组件模板文件的位置

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

CSS 选择器 app-heroes 用来在父组件的模板中匹配HTML 元素的名称，以识别出该组件。

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

始终要export 这个组件类，以便在其它地方（比如 AppModule）导入它。

添加 hero 属性

往 HeroesComponent 中添加一个heroes 属性，用来表示一个名叫“Ann” 的英雄。

heroes.component.ts 文件

 

显示英雄

打开模板文件 heroes.component.html 。删除Angular CLI 自动生成的默认内容，改为到hero 属性的数据绑定

 

显示HerosComponent 视图

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

app-heroes 就是 HeroesComponent 的元素选择器。所以只要把<app-heroes> 元素添加到 AppComponent 的模板文件中就可以了。

出现了一些问题，占坑，解决了补上。。。。