angular2.0学习笔记5.关于组件

1.组件文件应在/src/app文件夹下

2.组件文件命名应遵循小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。

如：HeroDetailComponent类应该放在hero-detail.component.ts文件中。

3.组建类命名应遵循大驼峰形式，并且以Component结尾。

例如：hero-detail.component.ts文件中类名应该是HeroDetailComponent。

4.要定义一个组件，我们总是要先在组建文件头部导入符号Component。

例如：

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

@Component({
  selector: 'hero-detail',
})
export class HeroDetailComponent {
}

@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。总是export这个组件类，因为你必然会在别处import它。

5.组件属性的绑定

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

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

src/app/hero-detail.component.ts (excerpt)

首先，修改@angular/core导入语句，使其包含符号Input。

然后，通过在hero属性前面加上@Input装饰器，来表明它是一个输入属性。

@Input() hero: Hero;

6.每个组件都必须在一个（且只有一个）Angular模块中声明。
src/app/app.module.ts

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

declarations: [
  AppComponent,
  HeroDetailComponent
],

通常，declarations数组包含应用中属于该模块的组件、管道和指令的列表。 组件在被其它组件引用之前必须先在一个模块中声明过。 这个模块只声明了两个组件：AppComponent 和 HeroDetailComponent。