---
# System prepended metadata

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

---

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

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

# Component 元件

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

![](https://i.imgur.com/z4SnUiI.png)

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

### selector

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

![](https://i.imgur.com/YO74p2u.png)

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

![](https://i.imgur.com/XKlQlvr.gif)

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

### templateUrl

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

### template

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

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

![](https://i.imgur.com/kna9yTE.png)


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

### styleUrls

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


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

![](https://i.imgur.com/NfrIhVj.png)


### styles

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

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

![](https://i.imgur.com/PtKurSX.png)


## 裝飾器 decorator `@`

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

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

> Angular已完成進度 83%

