四：Angular 元数据 (Metadata)

元数据告诉 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]	设置自定义插值标记，默认是{{}}