@Component

@Component装饰器（告诉Angular2）将class标记为Angular组件并收集组件配置元数据。

Metadata Overview(元数据概述)

@Component({

changeDetection:ChangeDetectionStrategy

viewProviders:Provider[]

moduleId:string

templateUrl:string

template:string

styleUrls:string[]

styles:string[]

animations:any[]

encapsulation:ViewEncapsulation

interpolation:[string,string]

entryComponents:Array<Type<any>|any[]>

preserveWhitespaces:boolean

})

How To Use（如何使用）

@Component({//装饰器

selector: 'greet',template: 'Hello {{name}}!'

})

class Greet {//class

 name: string = 'World';

}

Description（描述）

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed,instantiated and used at runtime.

Component装饰器允许你标记一个类作为Angular组件并提供额外的元数据，以确定如何在运行时处理，实例化和使用组件。

Components are the most basic building block of an UI in an Angular application.

组件是Angular UI界面最基本的构件（组件）。

An Angular application is a tree of Angular components.

一个Angular 应用是一个Angular 组件树（构成）。

Angular components are a subset of directives.

Angular组件是指令（directives）的一个子集（subset ）

Unlike directives,components always have a template and only one component can be instantiated per an element in a template.

与指令不同（Unlike不像），组件始终具有模板并且只能在模板中的元素中实例化一个组件。

A component must belong to an NgModule in order for it to be usable by another component or application.

组件必须属于NgModule，以便它可以被另一个组件或应用程序使用。

To specify that a component is a member of an NgModule,you should list it in thedeclarationsfield of that NgModule.

要指定组件是NgModule的成员，应将其列在该NgModule的声明字段中。

In addition to the metadata configuration specified via the Component decorator,components can control their runtime behavior by implementing various Life-Cycle hooks.

除了通过Component装饰器指定的元数据配置之外，组件还可以通过实现各种生命周期钩子来控制其运行时行为。

Metadata Properties（元数据属性）:

• animations- 该组件的动画列表
• changeDetection- 该组件使用的更改检测策略
• encapsulation- 此组件使用的样式封装策略
• entryComponents- 动态插入到此组件的视图中的组件列表
• exportAs- 组件实例在模板中导出的名称
• host- 类属性映射到事件，属性和属性的主机元素绑定
• inputs-将属性名列表列为数据绑定作为组件输入
• interpolation- 此组件模板中使用的自定义插值标记
• moduleId- 定义此组件的文件的ES / CommonJS模块ID
• outputs- 列出其他可以订阅的输出事件的类属性名称
• providers- 该组件及其子组件可用的提供程序列表
• queries- 配置可以注入组件的查询
• selector-css选择器，用于标识模板中的此组件
• styleUrls- 要应用于此组件视图的样式表的URL列表
• styles- 内联定义的样式应用于此组件的视图
• template-视图的内联定义模板
• templateUrl- url到包含视图模板的外部文件
• viewProviders- 此组件及其查看子项可用的提供程序列表

Example

@Component({

selector:'greet',template:'Hello {{name}}!'

})

classGreet{name:string='World';}

更多元数据属性以及描述可见angular2 中文官网虽然介绍和描述是英文的吧。。。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!