元件是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 來獲取事件資料。

自己特有的選項