元数据告诉 Angular 如何处理一个类。
@Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }
@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
@Component的配置项包括：
selector： CSS 选择器，它告诉 Angular 在父级 HTML 中查找 hero-list 标签，创建并插入该组件。
例如，如果应用的 HTML 包含hero-list， Angular 就会把HeroListComponent的一个实例插入到这个标签中。
templateUrl：组件 HTML 模板的模块相对地址，如前所示。
providers - 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。
元数据
@Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。
模板、元数据和组件共同描绘出这个视图。
其它元数据装饰器用类似的方式来指导 Angular 的行为。 例如@Injectable、@Input和@Output等是一些最常用的装饰器。
这种架构处理方式是：你向代码中添加元数据，以便 Angular 知道该怎么做。
angular 组件元数据一览
| 名称 | 类型 | 作用 |
|---|---|---|
| selector | string | 自定义组件的标签，用于匹配元素。 |
| inputs | string[] | 指定组件的输入属性。 |
| outputs | string[] | 指定组件的输出属性 |
| host | {[key:string],string} | 指定指令或组件的事件，动作和属性等 |
| providers | any[] | 指定该组件及其所有子组件（含ContentChildren）可用的服务依赖注入 |
| exportAs | string | 给指令分配一个变量，使其可以在模板中使用 |
| moduleId | string | 包含该组件模块的id，他被用于解析模板和样式的相对路径 |
| queries | {[key:string],any} | 设置需要被注入到组件的查询 |
| viewProviders | any[] | 指定该组件及其所有子组件可用的服务 |
| changeDetection | ChangeDetectionStrategy | 指定使用的变化监测策略 |
| templateUrl | string | 模板路径 |
| styleUrls | string[] | 样式路径 |
| template | string | 内联模板 |
| styles | string[] | 内联样式 |
| animations | AnimationEntryMetadata[] | angular动画 |
| encapsulation | ViewEncapsulation | 设置组件的试图包装选项 |
| interpolation | [string,string] | 设置自定义插值标记，默认是{{}} |