# Day11 【牙起來】 Component 元件設定 - Decorator 裝飾器

今天來看在元件程式中我們之前一直忽略的東西

# Component 元件

打開任何元件的程式 `.ts` 來看，一定都會有 `@Component({})`，裡面包了幾個參數


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

### selector

selector 為 CSS selector，表示以何種名稱被綁定在樣板中的、怎麼樣可以指名到這個元件。與Javascript的`querySelector`同理。


所以將 `selector` 更名為 `'app-test123'`後，在樣板上也要以 `<app-test123></app-test123>` 使用


> 在Angular中，檔案名稱**僅影響檔案路徑**，不影響如何去呼叫、使用元件，只要宣告有定義好

### templateUrl

此元件的樣板`.html`的檔案路徑

### template

也可以捨棄 `templateUrl`、刪除 `test.component.html` 檔案
直接在`template`中寫`HTML`語法

@Component({
  selector: 'app-root',
  template: `<h1>Hello World</h1>`,
  styleUrls: ['./app.component.css']
})


> 使用重音號` `` `來包住語法字串，會比起用單引號 `''`來的更方便一些

### styleUrls

此元件的樣式`.css`的檔案路徑
`styleUrls` 結尾有個`s`表示複數，而是陣列形式，表示可連結多個`css`檔案

styleUrls: ['./app.component1.css', './app.component2.css']


### styles

可以捨棄 `styleUrls`、刪除 `app.component.css` 檔案
直接在`styles`中寫`CSS`語法
一樣有個`s`表示複數，而是陣列形式，需用陣列形式包住

styles: ['h1 {color: red;}', 'h2 {color: blue;}'],


## 裝飾器 decorator `@`

`Decorator` 是 **Javascript** 原本就有的功能，之後延伸到 **Typescript** 中
被拿來應用在Angular框架上，把參數丟進標示的裝飾器中，產出一個新的物件

裝飾器不只在元件 `@Component`中出現，未來在指示 `@Directive`、在服務 `@Injectable`、在模組中 `@NgModule`，皆可以見到其身影。

> Angular已完成進度 83%