這個(gè)裝飾器是 DirectiveDecorator 的一個(gè)子類(lèi)，裝飾器名為 ComponentDecorator

其接口定義如下:

export interface ComponentDecorator {
    /**
     * @whatItDoes 標(biāo)記一個(gè)類(lèi)為 Angular 組件骇吭，并收集組件配置元數(shù)據(jù)
     *
     * @howToUse
     * Angular組件是指令的子集哭懈，和指令不同的是
     * 組件永遠(yuǎn)都有一個(gè)模版叹侄，只有組件才能實(shí)例化模版中的元素.
     *
     * 除了配置元數(shù)據(jù)全肮，組件可以通過(guò)聲明周期鉤子來(lái)控制它運(yùn)行時(shí)的行為
     *
     * **元數(shù)據(jù)屬性:**
     *
     * * **animations** - 組件的動(dòng)畫(huà)列表 list of animations of this component
     * * **changeDetection** - 組件的變化檢測(cè)策略 change detection strategy used by this component
     * * **encapsulation** - 組件的樣式封裝策略 style encapsulation strategy used by this component
     * * **entryComponents** - 動(dòng)態(tài)插入到這個(gè)組件視圖的一組組件 list of components that are dynamically inserted into the view of this component
     * * **exportAs** - 在模板中導(dǎo)出組件實(shí)例的名稱 name under which the component instance is exported in a template
     * * **host** - 類(lèi)屬性的映射奶栖，用于綁定事件塞蹭，屬性和特性 相當(dāng)于 HostBinding 或者 HostListener 孽江， map of class property to host element bindings for events, properties and
     *   attributes
     * * **inputs** - 類(lèi)屬性名稱的列表, 以數(shù)據(jù)綁定作為組件輸入 list of class property names to data-bind as component inputs
     * * **interpolation** - 此組件的模板中使用的自定義插值標(biāo)記 custom interpolation markers used in this component's template
     * * **moduleId** - ES/CommonJS module id of the file in which this component is defined
     * * **outputs** - 暴露給外界，以便外界訂閱的類(lèi)屬性列表 list of class property names that expose output events that others can
     *   subscribe to
     * * **providers** - 此組件及其子級(jí)可用的提供商列表 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** - 此組件及其視圖子級(jí)可用的提供商列表 list of providers available to this component and its view children
 }

組件繼承指令：

export interface Component extends Directive {
    /**
     * Defines the used change detection strategy.
     * 定義使用的變化檢測(cè)策略
     * 當(dāng)一個(gè)組件被實(shí)例化時(shí), angular創(chuàng)建一個(gè)變更檢測(cè)器, 它負(fù)責(zé)
傳播組件的綁定番电。
     *"changeDetection" 屬性的定義是, 是否每次都檢查更改檢測(cè)
或者只有當(dāng)組件告訴什么時(shí)候去檢測(cè)變化
     */
    changeDetection?: ChangeDetectionStrategy;

     # 定義一組只對(duì)其視圖子DOM可用的可注入的對(duì)象
    viewProviders?: Provider[];

     # 使用 SystemJS 才用岗屏，現(xiàn)在一般很少使用了
    moduleId?: string;

    templateUrl?: string;
    template?: string;

    styleUrls?: string[];
    styles?: string[];

    # angular 動(dòng)畫(huà)庫(kù)的一種內(nèi)聯(lián)寫(xiě)法
    animations?: any[];

    # 指定模版和樣式封裝方式，基本不用
    encapsulation?: ViewEncapsulation;

    # 重寫(xiě)默認(rèn)的封裝開(kāi)始和結(jié)束符( `{{` and `}}`) 基本不用
    interpolation?: [string, string];

   # 定義其它組件在本組件被編譯時(shí)漱办，其它組件也被編譯这刷，一般用于動(dòng)態(tài)插入組件的情況 用的比較多

    # Angular 將創(chuàng)建一個(gè) {@link ComponentFactory} 并且存儲(chǔ)在   {@link ComponentFactoryResolver}上
    entryComponents?: Array<Type<any> | any[]>;
}

export declare const Component: ComponentDecorator;

通過(guò)上面的注釋可以看出組件原信息的使用頻率