這個(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ò)上面的注釋可以看出組件原信息的使用頻率