美文网首页
AngularJs 元数据(Metadata)

AngularJs 元数据(Metadata)

作者: 关关雎鸠1206 | 来源:发表于2016-11-17 10:54 被阅读0次

元数据告诉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 知道该做什么。

相关文章

网友评论

      本文标题:AngularJs 元数据(Metadata)

      本文链接:https://www.haomeiwen.com/subject/kbddpttx.html