Day05 Angular牙起來 - 樣板中的標籤 與樣式

程式主元件 - app-component

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

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

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

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

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

現在來修改一些東西試試

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

在樣板中的標籤 - component

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

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

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

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

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

<app-left-column></app-left-column>

最終畫面變成這樣

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

套用樣式 - 行內 inline style

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

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

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

在 app.component.html 中修改 left-column 顯示的寬度

<app-left-column style="width: 20%; display: block"></app-left-column>

對元件標籤直接使用時，建議加上 display: block 才看得出效果
（因在HTML中自定義的標籤預設是 display: inline 的，不過也有辦法可以調整此項預設）

或者直接拿一層 <div> 包住元件也行

在 app.component.html 中修改為

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

完成的畫面結果

套用樣式 - 內部 internal style

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

在 app.component.html 中修改為

<div>
  <app-left-column></app-left-column>
</div>

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

畫面結果

套用樣式 - css檔案

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

div {
  width: 20%;
}

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

最終完成畫面

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