Angular中*ngIf搭配async管道处理Promise属性的运行原理咨询

Angular内置的async管道是为了简化异步数据源（Promise、Observable）的模板渲染而生的，它会自动完成「监听异步状态、提取返回结果、触发变更检测、销毁时自动清理监听」的全流程，不需要你在组件类里手动写.then()、订阅、取消订阅的逻辑。

结合你提供的代码的执行流程 #

你的组件已经在构造阶段执行了this.getStatus()，status指向一个已经启动的Promise实例，该实例会在2500ms后resolve为字符串stable，模板的运行逻辑分两个阶段：

• 初始渲染阶段（Promise处于pending状态时）
  两处status | async都会被管道处理：
  • 异步未完成时async管道返回null，*ngIf="null"判定为假，span元素不会被插入DOM，插值逻辑也不会执行
• Promise resolve完成后（2500ms后）
  async管道监听到Promise的resolve结果，触发Angular变更检测：
  • *ngIf里的status | async返回真值stable，条件成立，span元素被渲染到DOM
  • 插值位置的status | async会直接获取到已经resolve的stable值，渲染到页面

补充说明 #

• 同一个Promise实例多次使用async管道不会重复执行异步逻辑，Promise本身状态一旦敲定就不会变更，async管道会复用已经拿到的结果，不会触发多次setTimeout
• 如果你的Promise触发reject，async管道会直接抛出运行时错误，需要处理异常场景的话建议在getStatus()里提前加catch逻辑返回兜底值
• 组件销毁时async管道会自动清理对Promise的监听，不会产生内存泄漏
• 优化建议：你当前的写法对同一个Promise用了两次async管道，更简洁高效的写法是用as语法存下结果，只调用一次管道：

  <span *ngIf="status | async as statusVal">
    {{ statusVal }}
  </span>
  

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