@Component装饰器

这个装饰器是 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 | any[]>;
}

export declare const Component: ComponentDecorator;

通过上面的注释可以看出组件原信息的使用频率