---
# System prepended metadata

title: Day05 【牙起來】 樣板中的標籤與樣式

---

# Day05 【牙起來】 樣板中的標籤與樣式


## 程式主元件 - `app-component`

運行Angular時，最根部的元件是 `app.component.html`
所有的元件都必須長在他裡面、依他而行

在 `app.component.html` 中，加入`<app-role>`以及`<app-store>`標籤

```html=
<h1>Angular牙起來</h1>
<app-role></app-role>
<app-store></app-store>
```

透過這種方式呼叫所建立的元件，呈現在畫面上

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

會出現 `role works!`、`store works!` 這兩行文字當然是因為這兩個元件的樣版有這一段啦

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

現在來修改一些東西試試

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

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


> 往後當我們提到 **樣板**就是**HTML .html檔**、**樣式**就是**CSS .css檔**、**程式**就是**Typescript .ts檔**


## 在樣板中的標籤 - `component`

現在因為我想將畫面切開來，區分左側欄，將`role`及`store`挪到畫面左側位置
所以再產生一個新元件叫`left-column`
元件名稱中可以有減字號`-`

    (路徑: src/app)
    > ng g c left-column

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

接著要做一件酷的事情，在`left-column.compoennt.html`中寫入

```html=
<p>我是左側區塊</p>
<app-role></app-role>
<app-store></app-store>
```

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

然後在 `app.component.html` 中修改，留下這一行

```html=
<app-left-column></app-left-column>
```
![](https://i.imgur.com/536iW4v.png)

最終畫面變成這樣

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

此時在 `left-column` 元件中，有一段文字敘述，同時底下包含 `role`、`store` 兩個元件

### 套用樣式 - 行內 inline style

可以在樣板上使用 `inline style` 套用樣式

在 `left-column.component.html` 中新增背景顏色

```html=
<div style="background-color: gold">
  <p>我是左側區塊</p>
  <app-role></app-role>
  <app-store></app-store>
</div>
```

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


在 `app.component.html` 中修改 `left-column` 顯示的寬度
```html=
<app-left-column style="width: 20%; display: block"></app-left-column>
```

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


對元件標籤直接使用時，建議加上 `display: block` 才看得出效果
（因在HTML中自定義的標籤預設是 `display: inline` 的，不過[**也有辦法**](https://stackoverflow.com/questions/51032328/angular-component-default-style-css-display-block)可以調整此項預設）

或者直接拿一層 `<div>` 包住元件，限制住 `<div>` 的寬度也行

在 `app.component.html` 中修改為

```html=
<div style="width: 20%;">
  <app-left-column></app-left-column>
</div>
```

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


完成的畫面結果

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


### 套用樣式 - 內部 internal style

原本在HTML中能起作用的，到Angular元件內基本都能夠生效

在 `app.component.html` 中修改為

```html=
<div>
  <app-left-column></app-left-column>
</div>

<style>
  div {
    padding: 20px;
    background-color: red;
  }
</style>
```

畫面結果
![](https://i.imgur.com/7gIxwuh.png)


### 套用樣式 - css檔案

接著在 `app.component.css` 中新增CSS樣式

```css=
div {
  width: 20%;
}

app-left-column {
  display: block;
  padding: 10px;
  background: pink;
}
```

Angular把所有元件都切分開來，有獨自的
**只有在此元件中才吃的到 這個檔案中的CSS樣式設定**

最終完成畫面
![](https://i.imgur.com/jUSXHEG.png)


> 恭喜到這一步，已經完成**30%的Angular**！


