Angular(二) - 組件Component

• 1. 組件Component示例
• 2. Component常用的幾個選項
• 3. Component全部的選項
  • 3.1 繼承自@Directive裝飾器的選項
  • 3.2 @Component自己特有的選項
• 4. 自定義component

1. 組件Component示例

組件是由一個裝飾器@Component來聲明的，繼承自@Directive

import {Component} from '@angular/core';

@Component({
  selector: 'app-root233', // 這個 CSS 選擇器用於在模板中標記出該指令，並觸發該指令的實例化
  templateUrl: './app.component.html', // 指定html模板
  styleUrls: ['./app.component.css'] // 指定css
})
export class AppComponent {
  title = 'angularapp-2'; // 這里定義的title和enn可以在html中{{ title }}使用
  enn = true
}

2. Component常用的幾個選項

@Component最常用的幾個選項是:

• selector：這個 CSS 選擇器用於在模板中標記出該指令，並觸發該指令的實例化。
• template：組件的內聯模板，為組件展示的內容，一般內容比較少時使用。如果提供了它，就不要再用 templateUrl 提供模板了
• templateUrl：組件模板文件的 URL。如果提供了它，就不要再用 template 來提供內聯模板了。
• providers ：使用一個 令牌 配置該指令或組件的 注入器，該令牌會映射到一個依賴項的提供商
• exportAs ：一個或多個名字，可以用來在模板中把該指令賦值給一個變量。當有多個名字時，請使用逗號分隔它們

3. Component全部的選項

3.1 繼承自@Directive裝飾器的選項

選項	類型	說明
selector	string	css選擇器名，用於在模板中標記出該指令（組件），並觸發其實例化
inputs	string[]	Angular 會在變更檢測期間自動更新輸入屬性。 inputs 屬性定義了一組從 directiveProperty 指向 bindingProperty 的配置項： · directiveProperty 用於指定要寫入值的指令內屬性。 · bindingProperty 用於指定要從中讀取值的 DOM 屬性。 當沒有提供 bindingProperty 時，就假設它和 directiveProperty 一樣。 例如：
outputs	string[]	一組可供事件綁定的輸出屬性。當輸出屬性發出事件時，就會調用模板中一個附加到該事件的處理器。 每個輸出屬性都會把 directiveProperty 映射到 bindingProperty： · directiveProperty 指定要發出事件的組件屬性。 · bindingProperty 指定要附加事件處理器的 HTML 屬性。
provides	Provider[]	服務提供商的集合
exportAs	string	一個或多個名字，可以用來在模板中把該指令賦值給一個變量。當有多個名字時，請使用逗號分隔它們。
queries	[{key:string]:any}	配置將要注入到該指令中的一些查詢。 內容查詢會在調用 ngAfterContentInit 回調之前設置好。 試圖查詢會在調用 ngAfterViewInit 回調之前設置好。
jit	true	如果為 true，則該指令/組件將會被 AOT 編譯器忽略，因此永遠只會被 JIT 編譯。 這個選項是為了支持未來的 Ivy 編譯器，目前還沒有效果。
host	[{key:string]:string}	使用一組鍵-值對，把類的屬性映射到宿主元素的綁定（Property、Attribute 和事件）。 Angular 在變更檢測期間會自動檢查宿主 Property 綁定。 如果綁定的值發生了變化，Angular 就會更新該指令的宿主元素。 當 key 是宿主元素的 Property 時，這個 Property 值就會傳播到指定的 DOM 屬性。 當 key 是 DOM 中的靜態 Attribute 時，這個 Attribute 值就會傳播到宿主元素上指定的 Property 去。 對於事件處理： · 它的 key 就是該指令想要監聽的 DOM 事件。 要想監聽全局事件，請把要監聽的目標添加到事件名的前面。 這個目標可以是 window、document 或 body。 · 它的 value 就是當該事件發生時要執行的語句。如果該語句返回 false，那么就會調用這個 DOM 事件的 preventDefault 函數。 這個語句中可以引用局部變量 $event 來獲取事件數據。

3.2 @Component自己特有的選項

選項	類型	說明
changeDetection	ChangeDetectionStrategy	當組件實例化之后，Angular 就會創建一個變更檢測器，它負責傳播組件各個綁定值的變化。 該策略是下列值之一： · ChangeDetectionStrategy#OnPush(0) 把策略設置為 CheckOnce（按需）。 · ChangeDetectionStrategy#Default(1) 把策略設置為 CheckAlways。
viewProviders	Provider[]	定義一組可注入對象，它們在視圖的各個子節點中可用
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	ViewEncapsulation	供模板和 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]	改寫默認的插值表達式起止分界符（{{ 和 }}）
entryComponents	Array	一個組件的集合，它應該和當前組件一起編譯。對於這里列出的每個組件，Angular 都會創建一個 ComponentFactory 並保存進 ComponentFactoryResolver 中。
preserveWhitespaces	boolean	為 true 則保留，為 false 則從編譯后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正則表達式中匹配 \s 的字符。默認為 false，除非通過編譯器選項改寫了它。

4. 自定義component

angular提供了命令行可以生成組件，不用手動創建，下面是一個例子

# 在app/component文件夾下生成一個叫custom的組件
ng g component component/custom

生成出來的結果