Angular最新教程-第五節編寫第一個組件

講了四節了，一行代碼都沒有敲，雖說磨刀不誤砍柴工，但我們也是時候，上場砍點啥啦。
今天我們就來編寫我們的第一個組件，效果圖如下。

首先我們使用angular-cli的generate命令來幫我們自動化創建組件。
$ ng generate component site_status

通過分析效果圖我們知道了我們有8個數據需要綁定到頁面上。
我們先打開src\app\site-status\site-status.component.html

編寫我們需要的頁面元素。並綁定數據變量。
在ng1中，js我們大概會這麼寫。

var siteStatus  = {
        users:'14978',
        visitors:'20930244',
        articles:'2538',
        comments:'8075',
        maxOnlineNum:'291',
        maxOnlineTime:'17-04-25 17:23',
        onlineNum:'144',
        onlineUsers:'2'
    };

但是在typescript中，要使用變量要先聲明變量類型。
所以我們在src\app\site-status\site-status.component.ts中要先編寫

siteStatus:{
    users:string,
    visitors:string,
    articles:string,
    comments:string,
    maxOnlineNum:string,
    maxOnlineTime:string,
    onlineNum:string,
    onlineUsers:string
  };

聲明siteStatus是一個對象，裏面的屬性也要聲明類型。
然後在之後的函數中再給這個對象賦值。
當你不太確定屬性類型時，你可以使用any。
當一個變量類型被聲明成any時，他可以接受任意類型的數據，
有點類似var聲明。
這節課我們先不講解http請求這部分內容。
所以我們這裏在構造函數中給這個變量賦值。
完整代碼如下：

我們保存運行一下。（調試方法參照前幾節課）
我們發現，運行界面並沒有我們編寫的這個組件，
因爲我們還沒有在項目中使用到這個組件。
這句話有點廢話。但是我們可以明白一個事情，
我們編寫過程只是一個聲明過程，
在未被使用的時候，系統不會去加載運行他們。
後續使用打包優化的時候，沒有使用到的組件，
都不會被打進發布包裏面，保證了網站的整體較小。
這在後續章節中講解。
這裏我們在打開src\app\app.component.html，在這裏面使用我們新定義的組件。

保存。

這時候就有了我們編寫的內容了。但是效果和效果圖不太一樣，
所以我們給這個界面加入一些樣式。
我們打開app\site-status\site-status.component.ts組件的ts文件，查看，
該組件關聯的樣式文件是'./site-status.component.css' 在裏面加入我們想要的樣式。

加入樣式之後（詳細樣式文件請查看源碼），如下。

基本符合效果圖了，但是在標題左側還少了一個小圖標。
所以我們到阿里巴巴矢量圖庫去下一個”儀表盤”的圖標，
放到assets文件夾中，這個文件夾裏面的文件會被一起打包的。
把圖標加到html中並加上樣式，完成和效果圖一樣的效果。