为本地开发搭建环境(英雄编辑器)

一：下载并安装环境
1.下载范例hero到本地；
2.安装依赖包：npm install
3.保持应用不断转译和运行:npm start

二：笔记整理

1.@Component装饰器中指定的模板template，为这些新属性建立数据绑定,（还可以包括style,属性，方法）。
2.一个组件中最好只有一个类，建立单独的ts文件导入导出.（组件里面的叫属性）
3.建立数据：
（后期采用Web服务获取数据，初期可以模拟数据进行实验）
4. ngFor 来显示英雄列表;(循环)

. <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}      </span> {{hero.name}}
  </li>

5.为选中列表加一个样式：
[class.selected]="hero === selectedHero"
意思是：当表达式(hero === selectedHero)为true时，Angular会添加一个CSS类selected。为false时则会移除selected类。
6.点击事件：(click)=”onSelect(hero)”
7.ng-if:虽然我们要在模板中显示的是selectedHero.name，但在选中了一个英雄之前，我们必须让这些英雄详情留在DOM之外。

我们可以把模板中的英雄详情内容区放在一个

中。 然后，添加一个ngIf内置指令，把ngIf的值设置为组件的selectedHero属性。
<div *ngIf="selectedHero">...</div>
8.多个组件协同工作：
（1）文件名和组件名遵循风格指南中的标准方式。

a.组件的类名应该是大驼峰形式，并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent。

b.组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

(2)定义一个组件，我们总是要先导入符号Component.
@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。
@Component({
selector: 'hero-detail',
template:
…….

})
(3)输入属性：@Input

<hero-detail [hero]="selectedHero"></hero-detail>

意思是：在等号的左边，是方括号围绕的hero属性，这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性，否则Angular会拒绝绑定，并抛出一个错误。

解决错误：
a.修改@angular/core导入语句，使其包含符号Input。
import { Component, Input } from '@angular/core';

b.通过在hero属性前面加上@Input装饰器，来表明它是一个输入属性
@Input() hero: Hero;()

hero属性通过@input输入属性接收一个英雄对象，然后将属性绑定到自己的模板中。

template: `
    <div *ngIf="hero">
      ....
    </div>
  `

(4).每个组件都必须在一个（且只有一个）angualr模块module中声明。
a.在模块中导入子组件：

import { HeroDetailComponent } from './hero-detail.component';

b.添加到声明数组中：

declarations: [
  ...,
  HeroDetailComponent
],

declarations数组中包含应用中属于该模块的组件、管道和指令的列表。
组件component在被其他组件引用之前必须在一个模块module中声明过。