NG-ZORRO 實戰教程 - Todo List (Part 2)

來自專欄 NG-ZORRO

上篇我們實現了 NG ZORRO 的基礎配置和 Todo 的簡單操作，我們已經實現了 創建 和 完成 兩個事件，但是，我們需要增強創建Todo的功能，本章我們將繼續完善 Todo，讓待辦事項功能更加豐富一點。

創建後怎麼修改和刪除呢？怎麼讓Todo歸屬到指定菜單下呢？下面我們一一介紹。

回顧一下已完成的功能：

本篇文章部分功能在 stackblitz 復現，大家可直接訪問查看。Github地址。

完善功能

修改Task / 刪除 Task

先通過簡單css來優化一下界面，增加 修改 和 刪除 按鈕，同樣，我們需要兩個對應的處理事件，並在待辦事項後加上按鈕 :

todo.component.ts

// delete task deleteTodo(data) { this.todoLists.splice(this.todoLists.findIndex(todo => todo.id === data.id), 1); this.activeMenuItem(this.activedMenu); this.message.success(`${data.value} - Deleted Successfully!`, { nzDuration: 3000 }); } // edit task value,MODAL展示 editTodo(data) { const modalSubject = this.modalService.create({ nzTitle : Edit Task, nzFooter : null, nzContent : TodoModalEditComponent, nzComponentParams: { todo: data } }); modalSubject.afterClose.subscribe(newValue => { if (newValue) { // update task data.value = newValue; data.created = new Date(); } }); }

todo.component.html - 循環待辦事項後加上

<span class="actions"> <i class="anticon anticon-edit" nz-tooltip nzTitle="Edit Task" (click)="editTodo(todo)"></i> <i class="anticon anticon-close-circle-o" nz-tooltip nzTitle="Delete Task" (click)="deleteTodo(todo)"></i> </span>

todo.component.less - css控制樣式靠右

.actions { float: right; i { cursor: pointer; margin-left: 12px; }}

可以看到，點擊修改時我們使用了Modal組件來，點擊 傳送門 看代碼，這個todo-modal-edit文件夾下存放了我們修改Task的彈窗，至此我們完成了修改和刪除事件。

菜單 - Todo 歸類

對於 Todo 來說，分類管理也是常見需求，這裡我們使用 菜單組件 來作為演示。由於數據結構增多，這時我們可以提取 Interface 來統一管理：

提取 Interface

interfaces/menu.ts - 定義菜單結構

export interface IMenu { id: string; name: string; children?: IMenu[]; [key: string]: any;}

interfaces/todo.ts - 定義todo結構，增加parentId來歸屬某個節點

export interface ITodo { id: number; checked: boolean; value: string; created: Date; parentId?: string;}

根據數據自動生成菜單 （樣式問題，代碼正在重新修復中...）

同樣先來看看我們要實現的效果（有興趣的同學可以先自行嘗試一下）：

菜單生成原理其實比較簡單，就是循環遍歷 IMenu[] 數組，對於沒有children的節點直接顯示，對於存在children的節點則 遞歸 遍歷。

app-todo-menu-child - 類似如下代碼，接收IMenu類型數據child：

<ng-container *ngIf="child.children"> <li nz-submenu> <span title>{{child.name}}</span> <ul> <ng-container *ngFor="let subChild of child.children"> <app-todo-menu-child [child]="subChild"> </app-todo-menu-child> </ng-container> </ul> </li></ng-container><ng-container *ngIf="!child.children"> <li nz-menu-item>{{child.name}}</li></ng-container>

看看 todo-menu 文件夾下的代碼，這是一種簡單實現無限遞歸實現菜單的方法。這樣我們的菜單組件已經完成，只要傳入IMenu結構數組即可！要先學習一下Angular Input 和 Output 用法噢！

使用方法也很簡單：

// activedMenuId為初始化激活節點 <app-todo-menu [menu]="todoMenu" [activedMenuId]="activedMenu.id" (todoOutputEmit)="activeMenuItem($event)"></app-todo-menu>

Todo 歸類

既然要將不同的todo task歸類到不同菜單節點下，所以我們要對頁面遍歷的節點做些更改（參考上面的提取 Interface），看一下我們的菜單數據：

todo.component.ts

// 當前選中菜單節點activedMenu;// 菜單結構todoMenu: IMenu[] = [ { id : 100, name: 今日 }, { id : 200, name : 一周, children: [ { id : 201, name: 周一 }, { id : 202, name: 周二 }, { id : 203, name: 周三 } ] }, { id : 300, name: 垃圾箱 }];// 激活menu節點，要結合app-todo-menu的todoOutputEmit事件activeMenuItem(item: IMenu) { this.activedMenu = item; this.activedMenu.todoLists = this.todoLists.filter(todo => todo.parentId === item.id); this.activedMenu.completedList = this.completedList.filter(todo => todo.parentId === item.id);}

很明顯，頁面遍歷 todoLists 和 completedList 要變更為 activedMenu.todoLists 和activedMenu.completedList。代碼在此~，仔細看ngFor遍歷的數據是什麼。

操作示例

這樣，我們完成了 修改Todo 、刪除Todo、Todo歸類、菜單生成 等功能，涉及了諸多NG ZORRO組件，有興趣的同學可以嘗試使用 tree組件 實現同樣的菜單功能！

垃圾箱功能大家自己嘗試完成吧！

之後我們來結合 Rxjs 實現一些有意思的功能，有興趣的歡迎交流學習！