小菜鳥傑夫

目前看起來服務元件感覺像是把函示抽成一個類共用，適合使用的時機目前還感受不出來，應該是自己太菜...總之先記錄下來再一個一個跟進吧！

在SPA的架構中，透過API取得資料是在稀鬆平常不過的事情了，這邊會先使用檔案來做讀取，因此必須先做好設定，再來試著讀取API。

前方記錄了屬性繫結的方式，以及元件的建立方式，但如果元件跟元件之間要傳遞參數呢？這就需要用到input以及output了！

在用之前必須先了解，每個元件都是獨立的，而A元件的html中，呼叫B元件的這個行為

在此我把A元件視為「父元件」，把B元件視為「子元件」

父元件在建立子元件時，一併給予參數，這是input

子元件的某事件被觸發後，透過事件回傳參數，這是output

基本上pipe的用意，就是把進來的資料處理過後，再度送出

舉個例子好了

input：民國的日期

output：西元日期

1.在VS Code的快速建立方式Ctrl+~打開終端機

2.進到ng的資料夾底下

3.輸入指令：ng g c 元件名稱

這邊要記錄的是ngIf以及ngFor、ngClass、ngStyle

ngIf：被標記的欄位，若是資料為true，則顯示，否則關閉

ngFor：依據資料跑回圈，把所有資料讀出來

以下二個個人認為只是屬性繫結的變形

ngClass：帶入Class

ngStyle：寫style

範本參考變數適用於當要取得某html時，可以直接將該html轉為一個物件的方式

注意！

範本參考變數的命名，會跟ts中的變數名稱衝突，使用時要注意！

範例延續上一篇Angular4-資料繫結

Angular的繫結有分三種

1.屬性繫結

{{屬性名稱}}

2.內嵌繫結

[html 屬性名稱] = "屬性名稱"

3.雙向繫結

[(ngModel)] = "屬性名稱"

4.事件繫結

(觸發事件)="處理函式"

剛進入Angular的領域，對於裡面的程式語言在搞什麼鬼都不知道，趕快把知道的東西記錄下來

上一篇寫到繫結時，是透過$event.target.value去取得當前的資料，那萬一其他Html觸發時要取得Value呢？

那就是這篇要記錄的重點啦～「範本參考變數」