# 多奇 2020 年 2 月新人職前培訓班 - 2
###### tags: `Training` `Course`
---

[第一堂作業原始碼](https://github.com/changda0616/doggy-training-autocomplete-lesson)

---
### 元件之間的溝通
1. @Input, @Output
2. service
* 在模組中注入 - 模組中的 service 都是同一實體
* 在元件中注入 - 會是一個新的實體

3. [Redux](https://ngrx.io/)

### 如何知道 @Input 變化
1. 生命週期 ngOnChanges

ngOnChanges(changes: SimpleChanges): void {
  // ... doSomethingWhenChange
}

2. getter, setter

// @Input() data: Account;

get data(): Account {
    return this.originalData;
}

@Input('data')
set data(value: Account) {
    this.originalData = Object.assign({}, value);
}

originalData: Account;

### 如何做出可能有問題的元件架構
自然做下去就會...
> [參考範例](https://github.com/changda0616/doggy-training-component)
>
> 範例有兩個 branch：
> problem 是一開始問題的階段
> master 是完成的階段

### 練習
0. 請在 list-item 實踐按下 checkbox 才能編輯的行為
1. 同上，請實踐按下 update 後才更新初始資料的邏輯，且要重置 disabled 狀態
2. 請製作一顆 reset 為原始資料的按鈕
> [原始碼](https://github.com/changda0616/doggy-training-component-lesson)

### 作業
請製作一個含有編輯功能的 dialog 元件，此 dialog 元件中，要有三個編輯的欄位，分別為姓名、身高、體重，且不要讓 dialog 元件能夠直接更改外部傳來的物件。另外，在此 dialog 的下方會有三個按鈕，確定、重置和取消，當按下確定後，發出 post request 更新本地的 db，並在更新成功後，關閉 dialog，如果沒有成功，請出現 alert 提示使用者。
若使用者按下取消，直接將 dialog 關閉。
若使用者按下重置，請將 dialog 內的資料重置。

ps:
1. local 的 server 可以用這幾次練習用到的 [json-server](https://github.com/typicode/json-server)，記得觀察自己的 post 有沒有成功新增資料
2. 可以參考 [Angular Material Dialog](https://material.angular.io/components/dialog/overview)