Angular學習之元件和@Component
阿新 • • 發佈:2018-12-16
元件是angular中最常用的,可以說是組成一個應用的基本單位吧。如果將一個應用比作一個螞蟻群的話,元件應該是數量最龐大的工蟻了(開個玩笑)。 元件從技術上來說其實是一個指令,但因為它太特殊,太重要,所以Angular給它單獨做了裝飾器@Component。官方這麼說的(A component is technically a directive - but components are so distinctive and central to Angular applications that Angular defines the @Component decorator, which extends the @Directive decorator with template-oriented features.)。
元件的作用是展示檢視內容。
@Component裝飾器
宣告一個元件時,在元件類的之上要用@Component裝飾器來告知Angular這是一個元件。如下圖:
@Component最常用的幾個選項時:
- selector:這個 CSS 選擇器用於在模板中標記出該指令,並觸發該指令的例項化。
- template:元件的內聯模板,為元件展示的內容,一般內容比較少時使用。如果提供了它,就不要再用 templateUrl 提供模板了
- templateUrl:元件模板檔案的 URL。如果提供了它,就不要再用 template 來提供內聯模板了。
- providers :使用一個 令牌 配置該指令或元件的 注入器,該令牌會對映到一個依賴項的提供商
- exportAs :一個或多個名字,可以用來在模板中把該指令賦值給一個變數。當有多個名字時,請使用逗號分隔它們
以下為全部選項的列表:
繼承自@Directive裝飾器的選項
選項 | 型別 | 說明 |
---|---|---|
selector | string | css選擇器名,用於在模板中標記出該指令(元件),並觸發其例項化 |
inputs | string[] | Angular 會在變更檢測期間自動更新輸入屬性。 inputs 屬性定義了一組從 directiveProperty 指向 bindingProperty 的配置項:· directiveProperty 用於指定要寫入值的指令內屬性。· bindingProperty 用於指定要從中讀取值的 DOM 屬性。當沒有提供 bindingProperty 時,就假設它和 directiveProperty 一樣。例如: |
outputs | string[] | 一組可供事件繫結的輸出屬性。當輸出屬性發出事件時,就會呼叫模板中一個附加到該事件的處理器。每個輸出屬性都會把 directiveProperty 對映到 bindingProperty:· directiveProperty 指定要發出事件的元件屬性。· bindingProperty 指定要附加事件處理器的 HTML 屬性。 |
provides | 服務提供商的集合 | |
exportAs | string | 一個或多個名字,可以用來在模板中把該指令賦值給一個變數。當有多個名字時,請使用逗號分隔它們。 |
queries | 配置將要注入到該指令中的一些查詢。內容查詢會在呼叫 ngAfterContentInit 回撥之前設定好。 試圖查詢會在呼叫 ngAfterViewInit 回撥之前設定好。 | |
jit | true | 如果為 true,則該指令/元件將會被 AOT 編譯器忽略,因此永遠只會被 JIT 編譯。這個選項是為了支援未來的 Ivy 編譯器,目前還沒有效果。 |
host | 使用一組鍵-值對,把類的屬性對映到宿主元素的繫結(Property、Attribute 和事件)。Angular 在變更檢測期間會自動檢查宿主 Property 繫結。 如果繫結的值發生了變化,Angular 就會更新該指令的宿主元素。當 key 是宿主元素的 Property 時,這個 Property 值就會傳播到指定的 DOM 屬性。當 key 是 DOM 中的靜態 Attribute 時,這個 Attribute 值就會傳播到宿主元素上指定的 Property 去。對於事件處理:· 它的 key 就是該指令想要監聽的 DOM 事件。 要想監聽全域性事件,請把要監聽的目標新增到事件名的前面。 這個目標可以是 window、document 或 body。· 它的 value 就是當該事件發生時要執行的語句。如果該語句返回 false,那麼就會呼叫這個 DOM 事件的 preventDefault 函式。 這個語句中可以引用區域性變數 $event 來獲取事件資料。 |
自己特有的選項
選項 | 型別 | 說明 |
---|---|---|
changeDetection | 當元件例項化之後,Angular 就會建立一個變更檢測器,它負責傳播元件各個繫結值的變化。 該策略是下列值之一:· ChangeDetectionStrategy#OnPush(0) 把策略設定為 CheckOnce(按需)。· ChangeDetectionStrategy#Default(1) 把策略設定為 CheckAlways。 | |
viewProviders | 定義一組可注入物件,它們在檢視的各個子節點中可用 | |
moduleId | string | 包含該元件的那個模組的 ID。該元件必須能解析模板和樣式表中使用的相對 URL。 SystemJS 在每個模組中都匯出了 __moduleName 變數。在 CommonJS 中,它可以設定為module.id。 |
templateUrl | string | 元件模板檔案的 URL。如果提供了它,就不要再用 template 來提供內聯模板了。 |
template | string | 元件的內聯模板。如果提供了它,就不要再用 templateUrl 提供模板了。 |
styleUrls | string[] | 一個或多個 URL,指向包含本元件 CSS 樣式表的檔案。 |
styles | string[] | 本元件用到的一個或多個內聯 CSS 樣式。 |
animations | any[] | 一個或多個動畫 trigger() 呼叫,包含一些 state() 和 transition() 定義。 |
encapsulation | 供模板和 CSS 樣式使用的樣式封裝策略。取值為:· ViewEncapsulation.Native:使用 Shadow DOM。它只在原生支援 Shadow DOM 的平臺上才能工作。· ViewEncapsulation.Emulated:使用墊片(shimmed) CSS 來模擬原生行為。· ViewEncapsulation.None:使用全域性 CSS,不做任何封裝。如果沒有提供,該值就會從 CompilerOptions 中獲取它。預設的編譯器選項是 ViewEncapsulation.Emulated。如果該策略設定為 ViewEncapsulation.Emulated,並且該元件沒有指定 styles 或 styleUrls,就會自動切換到 ViewEncapsulation.None。 | |
interpolation | [string, string] | 改寫預設的插值表示式起止分界符({{ 和 }}) |
preserveWhitespaces | boolean | 為 true 則保留,為 false 則從編譯後的模板中移除可能多餘的空白字元。 空白字元就是指那些能在 JavaScript 正則表示式中匹配 \s 的字元。預設為 false,除非通過編譯器選項改寫了它。 |