四: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 知道该怎么做。

名称类型作用
selectorstring自定义组件的标签,用于匹配元素。
inputsstring[]指定组件的输入属性。
outputsstring[]指定组件的输出属性
host{[key:string],string}指定指令或组件的事件,动作和属性等
providersany[]指定该组件及其所有子组件(含ContentChildren)可用的服务依赖注入
exportAsstring给指令分配一个变量,使其可以在模板中使用
moduleIdstring包含该组件模块的id,他被用于解析模板和样式的相对路径
queries{[key:string],any}设置需要被注入到组件的查询
viewProvidersany[]指定该组件及其所有子组件可用的服务
changeDetectionChangeDetectionStrategy指定使用的变化监测策略
templateUrlstring模板路径
styleUrlsstring[]样式路径
templatestring内联模板
stylesstring[]内联样式
animationsAnimationEntryMetadata[]angular动画
encapsulationViewEncapsulation设置组件的试图包装选项
interpolation[string,string]设置自定义插值标记,默认是{{}}