Component

基本上元件會負責頁面樣式的呈現，資料的撈取與處理都會交由 Service 進行，後續會有文章介紹 Service服務。

建立Component

ng generate component [名稱／路徑] [參數]
ng g c [名稱／路徑] [參數]

頁面與樣式

預設建立元件時，CLI 會將 HTML、CSS 以及 ts 檔案拆開分散不同地方（通常架構也都這樣做），可以指定 --inlineStyle 與 --inlineTemplate 參數來將所有檔案都放在 ts 檔案裡面。

所屬模組

元件要被定義在模組內才能被使用，預設 CLI 會尋找最接近的 module 自動加入，例如我執行：

ng g c demo1

這樣會在 src/app 建立 demo1.component.ts 等相關檔案 ，然後這裡最接近的 moduel 是  AppModule ，這個元件就會被加入  AppModule內。

如果像之前已經建立過 module 的話：

ng g module test2

這樣會有一個 src/app/test2/test.module.ts 的檔案，而如果要建立一個在 test2 下名為 test2 的元件：

ng generate component test2

不需要寫路徑 test2/test2 的，因為他會尋找最接近的 module ，這樣就會連帶元件相關的檔案都建立在 test2 下面了。

也可以在檔案名稱直接指定要建立的路徑。

供外部模組使用

如果要讓外部模組引入這個元件，記得加入 --export 參數。

Component 裝飾器

如同 module 一樣， Component 有一個 @Component 類別的裝飾器。

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

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

頁面樣式

CSS 的路徑會被放在 stylesUrls 屬性裡，而樣板（HTML）會被放在 templateUrl 屬性裡。如果有帶上參數讓 CSS 以及 HTML 放在 ts 檔案裡面的話，會有 template 與 styles 屬性直接寫樣式表以及 html 程式碼。