Hi，本課將介紹 Angular 組件是什麼， 以及如何使用 Angular CLI 創建一個。 組件是 Angular 框架的基礎。 組件是應用程序的一部分， 就像一個導航欄， 或側面導航欄。 它可能是一個搜索字段， 或者可能是註冊表。 組件是不同的部分 構建您的應用程序， 為用戶提供交互的視圖， 和一個響應事件的類， 並處理數據和邏輯。 該類控制組件邏輯和行為， 並且模板設置了它在屏幕上的呈現方式 對於用戶。 組件類和模板 能夠使用綁定進行交互和共享信息。 屬性綁定允許類 將數據傳遞給模板以顯示給用戶。 如果用戶更改視圖中的任何數據， 事件綁定可用於觸發事件 更新類中的數據。 元數據提供額外的配置信息 對於組件類。 組件使用稱為選擇器的屬性命名 這是在元數據中設置的。 選擇器用於告訴 Angular 在應用程序中這個組件的位置 應該被創建和顯示。 使用選擇器， 您可以嵌入組件， 和其他組件模板 從這個根組件開始， 它包含整個 Angular 應用程序。 這些嵌入式組件具有父/子關係 允許他們進行交互和傳遞數據。 子組件嵌入在父組件中。 所以在這裡，根組件是父組件， 然後它有兩個子組件，A 和 B。 這裡的組件A是父組件 到這裡的這個組件， 孫組件。 這個組件是根組件的孫子 因為它是根的子組件之一的子組件。 現在，要創建一個組件， 打開一個終端窗口， 並且您想確保您位於正確的目錄中。 你想在根文件夾中 您的 Angular 應用程序。 所以對我來說，這就是這裡的 components 文件夾。 然後是創建新組件的命令 是生成組件， 然後是組件名稱。 然後你可以從打印的輸出中看到 創建了四個新文件， 並且修改了 app.module 文件。 在模塊文件中， 你可以看到它在這裡自動導入組件， 然後在此處聲明它以在模塊中使用。 CLI 工具負責這一步 生成組件時。 因此，如果您手動創建組件文件， 不要忘記在這裡聲明它們， 否則應用程序將編譯出錯。 組件文件夾位於這個主應用程序文件夾中， CLI 創建了四個文件。 這裡的第一個 TypeScript 文件 用於為組件編寫測試。 這裡的第二個 TypeScript 文件 是為班級準備的。 這是將此類標記為組件的裝飾器， 以及用於配置它的元數據。 我們將在下一課中更深入地介紹這一點， 但請記住此處選擇器的名稱。 這是將此組件添加到應用程序所需的內容。 如果打開組件的 HTML 文件， 你可以在這裡看到它以這個段落標籤開頭 這表明該組件正在工作。 然後如果你在這裡打開 CSS 文件， 這個一開始是空白的， 但是我們可以快速編寫一個規則來改變字體顏色 那個段落標籤。 現在，要在應用程序中顯示此組件， 打開 app.component.html 文件， 這是根組件的模板文件。 您可以在此處刪除所有這些入門模板代碼。 然後我要快速添加一個 h1 標籤 那是我的 Angular 應用程序。 然後添加新組件， 使用選擇器編寫標籤 這是為組件設置的。 在這種情況下，它是 app-hello-world。 現在我要運行命令的 ng serve 在終端窗口中構建應用程序。 現在應用程序正在運行， 我要在瀏覽器窗口中打開它， 你可以去 localhost:4200 查看應用程序。 在這裡你可以看到應用程序 正在顯示創建的組件。 這就是本課的全部內容， 引入 Angular 組件。 看看下一課 我們將在這裡介紹裝飾器和元數據。
