快速產生 Angular 元件

要在 Angular 專案中快速產生元件，首先要先打開 VS Code 的終端機面板，並輸入以下指令：

ng generate component page1

前面的 ng generate component 是使用 Angular CLI 產生元件的語法，後面的 page1 則是元件的檔案名稱。

元件建立完成後，可以看到終端機面板顯示了一些資訊，CREATE（建立）了四支檔案，及 UPDATE（更新）了一個檔案。

如上圖所示，新建的四個檔案，就是包含在 src/app/page1 這個路徑的 page1 元件裡，同時更新了 app.module.ts 的內容。

而 page1 元件裡的檔案簡單說明如下：

• 1. page1.component.ts：裡頭的選取器名稱，預設就是 app-page1，而 Component 的 class（類別）名稱，預設就叫 Page1Component，同時也可以看到相對應的 HTML Template 及 CSS 檔案。
     
• 2. page1.component.html：Page1Component 對應的 HTML 檔案，Template 預設的內容十分單純。
     
• 3. page1.component.css：Page1Component 對應的 CSS 檔案，預設內容是空的，針對 page1.component.html 設定的 CSS 樣式，可以寫在這個檔案裡。
• 4. page1.component.spec.ts：這是一個單元測試的檔案，需要測試時才有機會用到。
     

以上就是一個 Component 被建立起來時，預設會產生的四個檔案。

接著，我們來看剛才建立元件時，被修改的 app.module.ts 檔案。

Angular Module 的主要功能是用來把這個模組相關的元件，封裝在一起，所以我們剛才建立了一個元件，此時就要把元件註冊到應用程式最上層的 Module，也就是 AppModule 裡面來。

所以你從上圖可以看到，Page1Component 已經被自動註冊進來了，而 Page1Component 因為負責顯示資料，所以預設會被放進 declarations 這個屬性底下。

而要匯入 Page1Component 到 Module 裡，當然也需要有 import 的語法，這個部分 Angular CLI 也幫我們自動完成了！

其他建立 Angular 元件的方法

我們剛才在終端機面板使用指令建立了 Angular 的元件，然而還有其他做法也可以達成同樣目的。

• 簡化的指令：我們可以把剛才的指令：

ng generate component page1

簡化成如下的指令：

ng g c page1

同樣可以建立一個元件，而且需要打的指令更少！

• 使用滑鼠右鍵：我們可以對著專案中的 app 資料夾點擊右鍵，然後選取選單中的 Angular: Generate a component。
  

此時在畫面上方出現一個 input，讓你可以輸入元件的名稱。

接著，我選擇 Default component 並按下 enter 鍵。

再選擇 Confirm 並按下 enter 鍵。

就會建立出跟剛才使用指令結果相同的元件了。

如何刪除 Angular 元件

由於 Angular CLI 的強大威力，我們可以很輕易的建立元件，但如果我們出於某些原因，想要刪除已建立的元件，又該怎麼做呢？

此時，Angular CLI 就無法幫上忙了，只能自己手動刪除，首先我們在要刪除的元件資料夾上點擊右鍵，如下圖中的 pageDemo，並在選單中選擇刪除。

確認刪除後，pageDemo 的資料夾就會從專案中消失。

我們剛才有提過，使用 Angular CLI 建立元件的時候，除了新增元件相關的檔案，也會一併更新 app.module.ts，所以我們還必須到 app.module.ts 裡去刪掉被移除元件的相關內容，如下圖紅框處。

因為 AppModule 已經找不到被我們移除的 pageDemo 元件了，所以在畫面上，也可以看到紅色的錯誤線條提示，因此，只要把 pageDemo 元件相關的程式碼拿掉，就不會再噴錯了！

本篇，我們了解到如何建立及刪除 Angular 的元件，下一篇我們要把 Angular 元件呈現到畫面上~