5-4.Angular 入門教學 - 使用@Output從父元件監聽子元件的事件

影片有先講解官網的基本範例後，再回到我們todo專案實作

接著我們接續上一篇修正刪除畫面無法正確運作的問題

那原因在哪？原因就是section.component.ts中的以下這段

this.todoDataList = this.todoDataList.filter(data => data !== item);

這邊我們重新給了this.todoDataList新的內容，但我們畫面上的ngfor資料來源是父親的nowTodoList

那父親的nowTodoList來源是父親自己的todoDataList

但此時是兒子自己改了自己todoDataList的內容，並不是改父親的todoDataList

所以最後反應的結果就是nowTodoList沒有任何變化，因為父親的todoDataList並沒有被改變

所以我們可以利用Output對子元件來做出一個事件設置

@Output()
onDeleteItem= new EventEmitter<Todo>();

當我子元件的要刪除代辦事項時，emit出一個事件，然後射出的參數是一個todo物件

接著我們改一下原先的delete的程式

delete(item: Todo) {
  this.todoApiService.刪除(item).subscribe();
  this.onDeleteItem.emit(item);
  //this.todoDataList = this.todoDataList.filter(data => data !== item);
}

這邊將刪除的工作交給父親來做，子元件告訴父親要刪誰就好

接著我們在父親這邊新增一個刪除方法

deleteItem(item: Todo) {
  this.todoDataList = this.todoDataList.filter(data => data !== item);
}

然後在子元件app-section上榜定onDelete事件

<app-section (onDeleteItem)="deleteItem($event)" [nowTodoList]="nowTodoList" [todoDataList]="todoDataList" [todoCompleted]="todoCompleted">
</app-section>

接著我們來看程式是否可以正常運作了

看起來沒問題了，那footer基本也是同樣的問題，這邊就不示範了，留給大家自己做，那範例檔會是做好的

那下一篇會有更直接暴力的作法

那其實從這邊就可以了解到，切分元件也是有許多技巧在裡面

以這個範例為例，沒切割前寫起來很直覺，但切割之後要注意的事情和工作一下變多了

所以過度的切割也並不是件好事，所以往後真的在實作專案時，就要自己衡量到底要切到什麼程度才能兼顧又要好開發，又要以後好維護

最怕的是切到開發時搞死自己，事後維護也沒多方便

其實以這個例子，就有這種味道XDDD，但這是為了要舉例才硬切的哈~~

範例檔：下載