一、模仿Reddit

a) 運行ng new –ng4angular-reddit創建應用，從隨書代碼中復制樣式文件，新建組件app-root，代碼為：

界面可以看到了：

b) 對於界面輸入的數據，獲取的方式有點特別，使用了#newlink這樣的語法，newlink是一個對象，現在代表就是所在的input這個DOM元素。

將對象作為參數傳遞給addArticle方法，在對應的ts代碼中，可以獲取newlink.value。newlink是HTMLInputElement類型。

c）關於參數的綁定，在html文件使用{{***}}這樣的語法，ts代碼中對應的參數如果發生變化會及時反映到界面。

接下來是像這樣的文章列表，要添加Article組件，組件的selector為app-article，之後可以在主頁面使用<app-article>了。Article組件負責顯示每一篇文章，數據要從外部傳遞，以滿足復用的要求，@Input()article:Article定義了輸入參數article。

在主界面顯示文章列表時，用*ngFor遍歷，使用[article]=”**”可以向組件傳遞參數。

最後的效果為：

點擊up\down響應非常快，而且無刷新，但還不清楚背後的機制。

二、TypeScript

a)TypeScript是ES6（ECMAScript6）的超集，ES6相對於ES5增加了類、模塊等特性，TypeScript則又在ES6的基礎上增加了強類型的機制。現在支持ES6新標準的瀏覽器還比較少，ts代碼會首先被編譯成ES5代碼。TypeScript由微軟發起並開源，現在Google也在維護。TypeScript具有很多新特性，例如類型、類、裝飾器、導入等。

b)Types，強類型有助於在編譯的時候及早發現代碼錯誤，並且強類型代碼具有更好的可讀性。TypeScript代碼的寫法，與C#在很多地方是相反的：

類型有string、number、boolean、Array<>、enum、any，對於方法的返回值還有void。

c)Classes、Properties、Methods，在ES5中有面向對象的概念，但沒有類，ES6為JS內置了類，聲明語法為classTable {}，類內可以聲明具有類型的屬性，屬性使用時要用this，否則會提示找不到，方法也可以不指定返回類型（包括void），這樣的方法可以返回任意類型的結果。

d)Constructors，構造函數見多了，但TypeScript的構造函數名稱必須為constructor，構造函數可以有參數，但不能返回值，而且構造函數也不能有重載（ES6可以有）。

e)Inheritance

Car繼承了Mechaine，使用extends關鍵字，通過super初始化父類或調用父類方法。父類的run方法就算不寫修飾符也可以被派生類使用，猜想TypeScript中方法的默認修飾符是protected。

f)箭頭函數Fat ArrowFunctions，不知道寫個Fat是什麽意思。與C#的lambda、匿名函數一個意思吧，在箭頭函數中，this的作用域在函數內部。

g)字符串模板

TypeScript的字符串模板使用方法，感覺沒有string.Format方便的樣子，還需要首先定義參數，這裏使用倒引號。

學習資料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

Angular基礎(三) TypeScript