元数据告诉Angular如何处理一个类
回头看看HeroListComponent就会明白:他只是一个类,一点框架的痕迹都没有,里面完全没有出现“Angular”的字样。
实际上,HeroListComponent真的只是一个类,直到告诉Angular这是一个组件。只要把 **元数据 *附加到这个类,就相当于告诉 Angular : HeroListComponent
是个组件。
在 TypeScript 中,我们用 装饰器 (decorator) 来附加元数据。 下面就是 HeroListComponent
的一些元数据。
代码如下:
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/ . . . */
}
@Component装饰器能接受一个配置对象,Angular会基于这些信息创建和展示组件机视图。
来看下@Component中的一些配置项:
modeuleId:为与模块相关的URL(如templateUrl)提供基地址。
seletor:一个CSS选择器,它告诉Angular在父级HTML中找一个<hero-list>标签,然后创建该组件,并插入此标签中,比如,如果应用的HTML包含<hero-list>,Angular就会把HeroListComponent的一个实例插入到这个标签中。
templateUrl:组件HTML模板的模块相对地址
providers:一个数组,包含所依赖的服务所需要的依赖注入提供商。这是在告诉Angular:该组件的构造函数需要一个HeroService服务,这样组件就可以从服务中获得用来显示英雄列表的那些数据。
@Component
里面的元数据会告诉 Angular 如何取得你为组件指定的元数据。
模板、元数据和组件共同描绘出这个视图。
我们也会沿用类似的风格,用其它元数据装饰器来指导 Angular 的行为。 比如 @Injectable、 @Input和 @Output
等是一些最常用的装饰器。
这种架构所决定的是:必须往代码中添加元数据,以便 Angular 知道该做什么。
网友评论