2-3 【初識組件】頂部 TabBar

VsCode中使用Emmet神器快速編寫HTML代碼

1
根組件下面包含了不少的子組件

組件就是控制屏幕的某一個部分，某一個區域


組件是能夠相互包含的
組件是定義在類裏面的，類裏面有屬性和方法


註解會標記一個class是component

模板決定了組件長得什麼樣子

style是風格什麼樣子






開始作頂部的tabBar
把原來的代碼都刪除掉







emmet
emmet的語法：
https://docs.emmet.io/

先寫上這三個




寫css：

這樣就橫過來顯示，不是豎着顯示了

上下爲0 左右爲5px

四個是上右下左，是對稱的，因此能夠寫成 0 5 這種形式

這樣之間就有了間隔

把文字下面的斜劃線去掉


左右和上面都沒有貼合

仍是沒有很好的貼合的，主要是因爲它外部產生的
 
在最外層的styles.css內去寫css代碼。這個是全局的




如今就全完的貼合了

ngFor

使用ngFor循環的形式

這就要求tabs是一個數組
在ts內定義屬性，這是個數組

ngFor循環出來的菜單


ngFor是一個指令

回顧

組件就是控制屏幕的某塊區域的視圖
class經過屬性和方法與視圖交互



html的內容能夠這麼寫，這是內聯的寫法


ant design的例子都是內聯的寫法
https://ng.ant.design/components/grid/zh




經過chrome的插件Augury看組件Tree

這裏能夠查看依賴注入的順序