这个装饰器是 DirectiveDecorator
的一个子类,装饰器名为 ComponentDecorator
其接口定义如下:
export interface ComponentDecorator {
/**
* @whatItDoes 标记一个类为 Angular 组件,并收集组件配置元数据
*
* @howToUse
* Angular组件是指令的子集,和指令不同的是
* 组件永远都有一个模版,只有组件才能实例化模版中的元素.
*
* 除了配置元数据,组件可以通过声明周期钩子来控制它运行时的行为
*
* **元数据属性:**
*
* * **animations** - 组件的动画列表 list of animations of this component
* * **changeDetection** - 组件的变化检测策略 change detection strategy used by this component
* * **encapsulation** - 组件的样式封装策略 style encapsulation strategy used by this component
* * **entryComponents** - 动态插入到这个组件视图的一组组件 list of components that are dynamically inserted into the view of this component
* * **exportAs** - 在模板中导出组件实例的名称 name under which the component instance is exported in a template
* * **host** - 类属性的映射,用于绑定事件,属性和特性 相当于 HostBinding 或者 HostListener , map of class property to host element bindings for events, properties and
* attributes
* * **inputs** - 类属性名称的列表, 以数据绑定作为组件输入 list of class property names to data-bind as component inputs
* * **interpolation** - 此组件的模板中使用的自定义插值标记 custom interpolation markers used in this component's template
* * **moduleId** - ES/CommonJS module id of the file in which this component is defined
* * **outputs** - 暴露给外界,以便外界订阅的类属性列表 list of class property names that expose output events that others can
* subscribe to
* * **providers** - 此组件及其子级可用的提供商列表 list of providers available to this component and its children
* * **queries** - 可以插入到组件中的查询配置 configure queries that can be injected into the component
* * **selector** - css selector that identifies this component in a template
* * **styleUrls** - list of urls to stylesheets to be applied to this component's view
* * **styles** - inline-defined styles to be applied to this component's view
* * **template** - inline-defined template for the view
* * **templateUrl** - url to an external file containing a template for the view
* * **viewProviders** - 此组件及其视图子级可用的提供商列表 list of providers available to this component and its view children
}
组件继承指令:
export interface Component extends Directive {
/**
* Defines the used change detection strategy.
* 定义使用的变化检测策略
* 当一个组件被实例化时, angular创建一个变更检测器, 它负责
传播组件的绑定。
*"changeDetection" 属性的定义是, 是否每次都检查更改检测
或者只有当组件告诉什么时候去检测变化
*/
changeDetection?: ChangeDetectionStrategy;
# 定义一组只对其视图子DOM可用的可注入的对象
viewProviders?: Provider[];
# 使用 SystemJS 才用,现在一般很少使用了
moduleId?: string;
templateUrl?: string;
template?: string;
styleUrls?: string[];
styles?: string[];
# angular 动画库的一种内联写法
animations?: any[];
# 指定模版和样式封装方式,基本不用
encapsulation?: ViewEncapsulation;
# 重写默认的封装开始和结束符( `{{` and `}}`) 基本不用
interpolation?: [string, string];
# 定义其它组件在本组件被编译时,其它组件也被编译,一般用于动态插入组件的情况 用的比较多
# Angular 将创建一个 {@link ComponentFactory} 并且存储在 {@link ComponentFactoryResolver}上
entryComponents?: Array<Type<any> | any[]>;
}
export declare const Component: ComponentDecorator;
通过上面的注释可以看出组件原信息的使用频率