Angular Todo应用中*ngIf渲染需手动刷新的问题如何解决？

问题根因 #

你遇到的问题由两个状态不同步导致：

1. 组件内局部变量isEditTodo仅在点击编辑按钮时修改，路由返回预览页时没有自动重置为false，导致预览区域一直不渲染
2. 编辑保存后，存放待办列表的上层数据没有同步更新，只有刷新页面才会重新拉取最新数据，看起来就像编辑后的待办消失了

修复步骤 #

1. 移除局部变量isEditTodo，直接绑定路由状态控制视图切换 #

不用额外维护局部状态，直接通过路由激活状态控制*ngIf，完全避免状态和路由不同步的问题，先在组件类中注入Router：

// todo-preview.component.ts
import { Router } from '@angular/router';
// ...
constructor(public router: Router) {}

修改模板的判断逻辑，同时修正原模板ul标签重复定义class的问题：

<div class="todo-preview-container">
    <div class="preview-ctr" *ngIf="!router.isActive('/edit/'+todo._id, {exact: true}); else editRoute">
        <ul class="todo-preview todo {{ (todo.isDone ? 'done' : '') }}">
            <a [routerLink]="['/edit/',todo._id]" class="todo-content">
                <li>{{todo.title}}</li>
            </a>
            <li class="todo-date">Created: {{todo.date | date:'short' }}</li>
            <li (click)="ontoggleCompleted()" class="todo-status">status: <span>{{todo.isDone ? "Done" : "Active"}}</span></li>
            <li class="todo-importance">Level: {{todo.importance}}</li>
            <!-- remove btn -->
        </ul>
        <button (click)="onIdToRemove.emit(todo._id)"></button>
    </div>
    <ng-template #editRoute>
        <router-outlet></router-outlet>
    </ng-template>
</div>

2. 同步编辑后的数据 #

在edit-todo组件保存逻辑执行成功后，通过以下两种方式之一同步列表数据：

• 方式一：通过事件或共享服务把更新后的待办对象传给待办列表的父组件，替换列表中对应id的旧数据
• 方式二：保存成功后触发一次全量待办数据的拉取逻辑，更新整个列表的数据源

其他可选修复方案 #

如果你不想绑定路由状态，也可以在todo-preview组件中订阅路由事件，每次路由切换时检测当前路径不是编辑路径，就重置isEditTodo为false，配合编辑后的数据同步逻辑也能解决问题。

内容的提问来源于stack exchange，提问作者Uri Gross